2017-310bet-22 less

来源:http://www.chinese-glasses.com 作者:Web前端 人气:139 发布时间:2020-04-15
摘要:时间: 2019-10-04阅读: 134标签: 参数 Mixins 具有多个参数 10bet,Extend伪类 *参数可以使用逗号或分号分隔。(建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是

时间: 2019-10-04阅读: 134标签: 参数Mixins 具有多个参数

10bet,Extend伪类

*参数可以使用逗号或分号分隔。 (建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是css列表分隔符);使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。

样式的继承使用

LESS:

 .public {
        width: 100px;
        height: 100px;
    }

    .main 
(.public) {
            list-style-type: none;
    }

CSS:

.public,
.main ul {
  width: 100px;
  height: 100px;
}
.main ul {
  list-style-type: none;
}

参数mixin使用一个或多个参数,通过参数和它的属性来扩展Less的功能,以达到在混合到另一个块时自定义mixin输出的效果。如果编译器在mixin调用中或者是声明中看到至少一个分号,那么假设这个歌参数用分号分隔的话,并且所有逗号都属于css列表,我们可以有以下几种情况:两个参数,每一个包含逗号分隔的列表:.name(1, 2, 3; something, else)三个参数,并且每个包含一个数字:.name(1, 2, 3)使用虚拟分号创建混入调用一个参数包含逗号分隔的CSS列表:.name(1, 2, 3;)逗号分隔的默认值:.name(@param1: red, blue;)命名参数

命名空间和作用域

指定命名空间
LESS:

.public {
    width: 50px;
    height: 50px;
 }

.box {
    width: 100px;
    height: 100px;
     .a {
        display: block;
        float: left;
        .public;
         .b {
            .public;
         }
     }
}

.hk {
    .box;
}

.hn {
    .box >.a;
}

CSS:

.public {
  width: 50px;
  height: 50px;
}
.box {
  width: 100px;
  height: 100px;
}
.box .a {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
}
.box .a .b {
  width: 50px;
  height: 50px;
}
.hk {
  width: 100px;
  height: 100px;
}
.hk .a {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
}
.hk .a .b {
  width: 50px;
  height: 50px;
}
.hn {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
}
.hn .b {
  width: 50px;
  height: 50px;
}

私有作用域
LESS:

@color: #000;
.main {
    @color: #fff;
    .main-content {
        color: @color;
        width: 100px;
        height: 100px;
    }
}
.foot {
    .footer {
        color: @color;
    }
}

CSS:

.main .main-content {
  color: #fff;
  width: 100px;
  height: 100px;
}
.foot .footer {
  color: #000;
}

mixin引用时可以通过名称而不是位置来提供参数值,可以通过名称来引用任何参数任何参数都可以通过它的名称来引用,而不是特定的顺序 。

Parametric Mixins (带参数的混合)

1、参数可以用分号或者逗号分割。但是推荐使用分号分割。因为逗号符号有两个意思:它可以解释为mixins参数分隔符或者css列表分隔符。

使用逗号作为mixin的分隔符则无法用它创建逗号分割的参数列表。换句话说,如果编译器在mixin调用或者声明中看到至少一个分号,它会假设参数是由分号分割的,而所有的逗号都属于CSS列表:

两个参数,并且每个参数都是逗号分割的列表:.name(1,2,3;something, ele),
三个参数,并且每个参数都包含一个数字:.name(1,2,3),
使用伪造的分号创建mixin,调用的时候参数包含一个逗号分割的css列表:.name(1,2,3;),
逗号分割默认值:.name(@param1: red, blue)。

LESS:

.mixin(@color) {
    color-1: @color;
}

.mixin(@color;@width) {
    color-2: @color;
    width-2: @width;
}

.mixin(@color;@width;@height) {
    color-3: @color;
    width-3: @width;
    height-3: @height;
}

.main {
    .mixin(#fff;5px;10px);
}

CSS:

.main {
  color-3: #fff;
  width-3: 5px;
  height-3: 10px;
}

2、Named Parameters (命名参数)

引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。
LESS:

.a (@width:10px; @height:10px; @padding:2px 2px; @margin:10px;) {
    width: @width;
    height: @height;
    padding: @padding;
    margin: @margin;
}

.b {
    .a(@margin:30px;@padding:20px;)
}

CSS:

.b {
  width: 10px;
  height: 10px;
  padding: 20px;
  margin: 30px;
}

3、The @arguments variable (@arguments 变量)

@arguments在mixins内部有特殊意义,调用mixin时,它包含所有传入的参数。

LESS:

.border(@blur: 1px; @type:solid; @color: #000) {
  border: @arguments;
}
.a {
  .border(2px;dashed);
}

CSS:

.a {
  border: 2px dashed #000;
}

4、Pattern-matching (模式匹配)
.mixin基于@switch的值以不同的方式表现
LESS:

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

@switch: dark;
.class {
  .mixin(@switch; #888);
}

CSS:

.class {
  color: #6f6f6f;
  display: block;
}
 .mixin(@color: green; @font-size: 18px; @padding: 15px; @margin: 10px;) { color: @color; font-size: @font-size; padding: @padding; margin: @margin; } .name1 { .mixin( @color: blue; @margin: 20px;); } .name2 { .mixin(red; @padding: 30px; @font-size:40px;); } // 输出,改变后的值改变,没有重新赋值的值默认原值 .name1 { color: blue; font-size: 18px; padding: 15px; margin: 20px; } .name2 { color: red; padding: 30px; font-size:40px; margin: 10px; }

Mixins as Functions (作为函数使用的混合)

1、从mixin中返回变量
LESS:

.mixin (){
    @width: 100px;
    @height: 100px;
}

.a {
    .mixin();
    width: @width;
    height

CSS:

.a {
  width: 100px;
  height: 300px;
}

2、定义在mixin中的mixin可以作为返回值
LESS:

.unlock(@value) { 
  .doSomething() { 
    declaration: @value;
  }
}
#namespace {
  .unlock(5); 
  .doSomething(); 
}

CSS:

#namespace {
  declaration: 5;
}

@arguments 变量

Passing Rulesets to Mixins (传递规则集给混合)

1、分离(detached)规则集合是一组CSS属性,嵌套的规则集合,媒体声明或是存储在一个变量中的任何其他东西。可以将其包含到一个规则集合或其他结构中,它的所有属性将被复制在那里。也可以将它作为一个mixin参数,并传递它周围的其他任何变量。
LESS:

// 声明 detached 规则集合
@detached-ruleset: { 
    background: red; 
    width: 100px;
    height: 100px;
};

// 使用 detached 规则集合
.top {
    @detached-ruleset(); 
}

CSS:

.top {
  background: red;
  width: 100px;
  height: 100px;
}

2、定义一个mixin将一个媒体查询中的一个代码块或者一个浏览器不支持的类名抽象出来时很有用。规则集合可以传递规则集给mixin,所以该mixin会包装这些内容。
LESS:

.a(@rules) {
  @media screen and (min-width: 1200) { 
    @rules(); 
  }
  .b & { 
    @rules(); 
  }
}

header {
  background-color: blue;
  .a({
    background-color: red;
  });
}

CSS:

header {
  background-color: blue;
}
@media screen and (min-width: 1200) {
  header {
    background-color: red;
  }
}
.b header {
  background-color: red;
}

3、一个规则集合现在可以分配给一个变量或传递给一个mixin,并且可以包含全部的less特性。
LESS:

@public: {
    .a {
        width: 100px;
      height: 100px;
    }
    .a {
        background-color: #000;
    }
};

@media (orientation:portrait) {
    @public();
}

CSS:

@media (orientation: portrait) {
  .a {
    width: 100px;
    height: 100px;
  }
  .a {
    background-color: #000;
  }
}

4、
LESS:

.public(@rules) {
    .a { @rules(); }
    .b{ @rules(); }
}
header {
  background-color: blue;
  .public ({
    background-color: red;
  });
}

CSS:

header {
  background-color: blue;
}
header .a {
  background-color: red;
}
header .b {
  background-color: red;
}

5、分离规则集合可以解锁(返回)所有它的mixins给调用者,可以以同样的方式调用mixin。但是,它不会返回变量。
LESS:

// 带有mixin的分离规则集合
@detached-ruleset: { 
    .mixin() {
        color:blue;
    }
};
// 调用分离规则集合
.caller {
    @detached-ruleset(); 
    .mixin();
}

CSS:

.caller {
  color: blue;
}

@arguments在JavaScript中代表所有的参数,在mixin内部同样有特殊含义,它包含调用mixin时传递的所有参数;如果我们不想处理单个参数,它将会非常适用。

Mixin Guards(带条件的Mixin)

LESS:

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
.main {
    .mixin(#333)
}
.foot {
    .mixin(#f9f9f9)
}

CSS:

.main {
 background-color: white;
 color: #333;
}
.foot {
 background-color: black;
 color: #f9f9f9;
}

本文由10bet发布于Web前端,转载请注明出处:2017-310bet-22 less

关键词:

频道精选

最火资讯