Less从入门到精通——变量与混合

变量（variables）

Less中采用“ @ ”定义变量，使用时直接使用“@命名符”。

  1. 作为普通变量
// 命名：
@color:red; 
// 调用：
div{
      color:@color;
}

普通用法即为变量作为属性值时。

  1. 作为选择器和属性名的变量
@kuandu:width; 
.{@kuandu}{ @kuandu:150px;}

作为选择器需要用花括号{}来包含。作为属性名时，和属性值的调用方法一样。

  1. 作为URL
@myURL:" //www.baidu.com/static/images";
bg:url("@myURL/logo.png");

这样在相同路径下的图片或文件就可以声明一个URL变量，后接具体图片/文件名，路径不要忘记加双引号哦~。

  1. 延迟加载
    变量不论是在调用的前面定义还是在后面定义都是一样的，具有延迟加载的特性。
    它会在当前作用域样式未加载之前先加载变量，而且是由内而外，先寻找作用域内的变量，如果没有在寻找作用域外的变量。
    我们可以简单理解为变量的提升，即解析器解析到此项为变量时，会将其全部提升到前面，以供调用。
    注意：不是提最前面哦~，而是按提升顺序依次排列。即解析到的第一个变量在第一个，第二个在第二个，只是提升到调用的前面去~。
@font-size:12px;     // 第一个变量
@color:pink;	     // 第二个变量
div{
	font-size:@font-size;
}
// 下面的解析器解析后和上面的一样，即下面的变量会解析到当前作用域的前面。
div{
	font-size:@font-size;
}
@font-size:12px;   // 第一个变量
@color:red;        // 第二个变量
  1. 定义多个相同名称的变量时
    在定义一个变量两次时，只会使用最后定义的变量，Less会从当前作用域向上搜索，这个行为类似于CSS定义中始终使用最后定义的属性值（CSS层叠性）。
@font-size:12px;		    // 第一次定义
div{
	@font-size:15px;	    // 第二次定义（在div内部）
	font-size:@font-size;       // 最终结果为20px
	@font-size:20px;	    // 第三次定义（在div内部）
	// 解析：
	// 由我们的简单理解可知，第三次的会提升到第二次的后面，调用的前面，所以第三次会把第二次的层叠掉，在当前作用域中，离调用最近的是第三次，所以会找到第三次定义的20px
}
html{
	font-size:@font-size;	// 最终结果为12px
	// 解析：
	// 在div内部定义的只会在div内部起作用，所以html会找到离它最近的第一次定义的12px
}

混合（mixins）

1. 普通混合
混合就是一种将一系列属性从一个规则集引入（混合）到另一个规则集的方式。规则集可以理解为CSS样式，当我们的样式重复出现时，我们可以采用混合的方式来减少代码冗余。接下来先让我们看看普通的混合吧！

.bgc{
    background-color: pink;
}
body{
    .bgc;
}
// 输出的CSS样式为：
.bgc{
    background-color: pink;
}
body{
    background-color: pink;
}

如果我们不想让这个.bgc输出到css文件中，该怎么办呢，接下来为你介绍~

2. 不带输出的混合
如果你想要创建一个混合集，但是却不想让它输出到你的样式中
在不像输出的混合集的名字后面加上一个括号就可以实现。
我们在单纯定义只是用于调用时，可以使用，我们就可以把上述代码优化。

.bgc(){
    background-color: @color;
}
body{
    .bgc();
}
// 输出CSS样式为
body{
    background-color: pink;
}

3. 带选择器的混合
混合选择器内的规则

.my_hover(){
    // 伪类前使用 & 详情见 Less的嵌套规则 
    &:hover{
        color: @color;
    }
}
button{
    .my_hover(); 
}
/* 只是将里面的CSS代码拿过来，相当于：
button{
    &:hover{
        color: @color;
    }
}
*/
// 输出为：
button:hover {
  color: pink;
}

4. 带参数的混合
当属性一致但是属性值不一致时，我们可以通过传参的方式改变属性值，就可以给许许多多的选择器重复调用啦~

.border(@border_color){
    border: 1px solid @border_color;
}
div{
    .border(pink);  // div想要粉色滴
}
p{
    .border(red);   // p也想要红色滴
}

5. 带参数且有默认值
在许多都是用一个属性值时，我们可以设置默认值，这样就可以不用传参啦~

.border(@border_color:pink){
	border:1px solid @border_color;
}
div{
    .border();     
}

6. 带多个参数的混合
首先我们看看什么是多参数吧！
（1）多参数：一个组合可以带多个参数，参数之间可以用分号或者逗号分割

  • 推荐采用分号分割，因为逗号有两个意思，它可以解释为mixins参数分隔符或者css列表分隔符

  • 如果传参的括号里面都是以逗号分割，那么会依次传给各个参数值

  • 如果既有括号又有分号，会将分号前面的看作一个整体作为参数

（2）定义多个具有相同名称和参数数量的mixins是合法的，Less会使用它可以应用的属性，如果使用mixin的时候只带一个参数，这个属性会导致所有的mixin都会强制使用这个明确的参数。

div{
    .div(#ccc);  // 所有的 .div里的第一个参数都赋值为 #ccc 
}
// 第一个混合
.div(@border_color){
    border:1px solid @border_color;
}
// 第二个混合
.div(@border_color;@margin:2){
    .border(@border_color);
    margin: @margin;
}
// 第三个混合
.div(@border_color;@margin;@padding:2){
    .border(@border_color);
    margin: @margin;
    padding: @padding;
}
// 由于我们只传递了一个参数，而第三个混合的margin值没有默认值，也没有得到赋值，所以无法被调用。
// 输出为
div {
  border: 1px solid #ccc;      // 来自第一个 和第二个混合（合并输出）
  margin: 2;                   // 来自第二个混合
}

7. 命名参数
首先我们来了解什么是命名参数：
引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值，任何参数都可以通过它的名称来引用，这样就不必按照任意特定的顺序来使用参数
这样就不会担心数据被乱传喽~

.div(@border_color;@margin:2){
    .border(1px solid @border_color);
    margin: @margin;
}
div{
    .div(@margin:3;#ccc);   // 这样来指定第一个参数赋值给@margin变量，就不用按照原先定义的指定顺序输入啦~
}

8. @arguments变量
@arguments代表所有的可变参数，参数的先后顺序就是你( )里的参数顺序，值的位置和个数也是一一对应的，在你想给第一个和第三个赋值时不能直接写(值1，，值3)，必须把原来的默认值写上去。

.p_border(@c;@x:solid;@size:1px;){
    border: @arguments;
}
// 只给第一个没有默认值的参数，后面会使用默认值
p{
      .p_border(red);
}
// 输出的css文件为：
p{
      border:red solid 1px;
}
// 但如果我们将参数位置改变
.p_border(@x:solid;@size:1px;@c){
    border: @arguments;
}
// 这时像刚刚那样调用就会报错 因为是一一对应的 此时的red赋值给了@x，而@c没有值
// 所以必须这样 将默认值写上
p{
     .p_border(solid,1px,red);
}
// 如果全部都有默认值 则可以直接调用 如：
.p_border(@c:red;@x:solid;@size:1px;){
    border: @arguments;
}
p{
    .p_border();
}

9. 匹配模式
传值的时候定义一个字符，在使用的时候使用哪个字符，就调用哪条规则
根据不同功能定义字符，类似一个标识符，适用于相同属性值在类似属性中的应用，例如下例都是设置边框圆角。

.border(all;@w:5px){
    border-radius: @w;
}
.border(t_l;@w:5px){
    border-top-left-radius: @w;
}
// 想要四个圆角就调用 all
header{
    .border(all;50%);
}
// 想要左上一个圆角就调用 t_l
header{
    .border(t_l;50%);
}
// 类似的我们还可以定义右上、左下、右下等，这样就可以在适时调用合适的方法了

10. 得到混合变量中变量的返回值

 .average(@x;@y){
  	@average: ((@x + @y) / 2);
  }
  div{
  	.average(10;20);    // 调用进行计算
  	padding:@average;   // 得到混合变量中变量的返回值
  }
// 之所以可以得到 @average 是因为，混合是将规则集（这里为CSS样式表）拿过来 也就会变成如下代码
div{
      // 调用时 进行变量赋值
      @x:10;
      @y:20;
      // 将规则集混合
      @average: ((@x + @y) / 2);
      // 这样就是一个作用域啦~ 当然可以使用啦~
      padding:@average;
}

以上均为自己理解，若有不当，还请指出~ ^_^

Tags:

VirMach 便宜 VPS

QNews

QNews