学会如何使用LESS（一）----变量和混合

迈不过友情╰ 2022-06-14 03:57 545阅读 0赞

最近在学习了less，作些笔记；  
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。你也可以再less文件中写按照css规则写样式。less文件是以less作为文件后缀名，HTML引用时可以像css那样引用，如下：

在渲染HTML页面时，less文件需要编译成css文件。我们可以有很多种方法。在服务器端，如Node.js，我们有专门的less编译模块。如果是在客户端，需要从LESS官网下载less.js文件，然后在HTML页面中引入，如下：

**注意**：  
（1）确保包涵.less样式表在less.js脚本之前。  
（2）当你引入多个.less样式表时，它们都是独立编译的。所以，在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。  
（3）必须通过服务器环境访问页面，否则报错。

## 变量 ##

**一、定义变量**

//定义变量 
    @gray:#555;
    @orange:orange;
    
    header{
        background: @gray;
        text-align: center;
        height: 100px;
        line-height: 100px;
    }

编译后的css:

header{ background: #555555; text-align: center; height: 100px; line-height: 100px; }

**二、作为选择器和属性名的变量**  
注意：使用时将变量以@\{变量名\}的方式使用

@gao: height;
    
    .@{gao}{ @{
       gao}:300px;
    }

编译后的css:

.height { height: 300px; }

**三、作为URL的变量**

@imgurl:"https://www.baidu.com/img/";
    header{
        background:url("@{imgurl}bdlogo.png") no-repeat;
        height: 500px;
        border: 1px solid #333;
        background-size: 150px 150px;
    }

编译后的css:

header { background: url("https://www.baidu.com/img/bdlogo.png") no-repeat; height: 500px; border: 1px solid #333; background-size: 150px 150px; }

**四、定义多个相同名称的变量时**  
在定义一个变量两次或者多次时，只会使用当前作用域最后定义的变量，Less会从当前作用域向上搜索。这个行为类似于css的定义中始终使用最后定义的属性值。

@var: 0;
    
    .class{
      @var: 1;
        .brass {
          @var: 2;
          three: @var;  //这是的值是3
          @var: 3;
        }
      one: @var;  //这是的值是1
    }

编译后的css:

.class { one: 1; }
    .class .brass { three: 3; }

**五、延迟加载**  
延迟加载：变量是延迟加载的，在使用前不一定要预先说明。  
意思是指：在前面使用了这个变量，但没有定义，但可以在后面给他定义出来，不影响输出。

@color: #333;
    
    div{ width: 100px; height: 200px; font-size: @size; color: @color; }
    
    @size: 20px;

编译后的css:

div { width: 100px; height: 200px; font-size: 20px; color: #333333; }

## 混合 ##

**一、基本混合**

@orange: orange;
    
    .base{
        font-size: 30px;
        color: @orange;
    }
    
    h1{
        border: 1px solid red;
        .base;
    }

编译后的css:

.base { font-size: 30px; color: #ffa500; }
    h1 { border: 1px solid red; font-size: 30px; color: #ffa500; }

二、不带输出的混合，类名后面使用();(原来模板不出现)

@pink: pink;
    
    .base2(){
        border: 1px solid blue;
        background: @pink;
    }
    footer{
        .base2;
    }

编译后的css:

footer { border: 1px solid blue; background: #ffc0cb; }

**三、带选择器的混合**

.hoverMix(){
        &:hover{
            border: 1px solid green;
        }
    }
    
    button{
        .hoverMix;
    }

编译后的css:

button:hover { border: 1px solid green; }

**四、带参数的混合**

@gray: #555;
    .border( @color ){
        border: 1px solid @color; } h1{
        .border( @gray );
    }

编译后的css:

h1 { border: 1px solid #555555; }

**五、带参数并且有默认值的混合**  
像这样给参数设置默认值。有了默认值，我们可以不用设置属性值也能被调用。

.border2( @color:red ){
        border: 1px solid @color;
    }
    
    h2{
        .border2();
    }
    h3{
        .border2( @pink );
    }

编译后的css:

h2 { border: 1px solid #ff0000; }
    h3 { border: 1px solid #ffc0cb; }

**六、带多个参数的混合**  
如果传参的括号里全部都是以”，”分隔，那么会依次传给各个参数的值；如果传参的括号里既有”,”又有”;”那么会把”;”前面当作一个整体，传给一个值；

.mixin(@color;@padding:10;@margin:2){
        color: @color;
        padding: @padding;
        margin: @margin, @margin, @margin, @margin;
    }
    div{
        .mixin(@pink);
    }
    .div{
        .mixin(@orange;10,10,14,14;3);
    }

编译后的css:

div { color: #ffc0cb; padding: 10; margin: 2, 2, 2, 2; }
    .div { color: #ffa500; padding: 10, 10, 14, 14; margin: 3, 3, 3, 3; }

**七、定义多个具有相同名称和参数数量不同的混合**

.mixin2(@color) {
      color-1: @color;
    }
    .mixin2(@color; @padding:2) {
      color-2: @color;
      padding-2: @padding;
    }
    .mixin2(@color; @padding; @margin: 2) {
      color-3: @color;
      padding-3: @padding;
      margin: @margin @margin @margin @margin;
    }
    .some .selector div {
      .mixin2(#008000);
    }

编译后的css:

.some .selector div {
      color-1: #008000;
      color-2: #008000;
      padding-2: 2;
    }

从编译的结果可以看出，less也有函数重载的特性。当我们定义相同混合属性名，参数不同，然后.mixin(\#008000);调用，第一和第二混合都能匹配，但是第三个缺少参数@padding的值，所以不会引用第三个混合属性。  
**八、命名参数**  
引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都以用过它的名称来使用，这样就不必按照任意特定的顺序来使用参数；

.mixin3(@color: black; @margin: 10px; @padding: 20px) { 
      color: @color;
      margin: @margin;
      padding: @padding;
    }
    .class1 {
      .mixin3(@margin: 20px; @color: #33acfe);
    }
    .class2 {
      .mixin3(#efca44; @padding: 40px);
    }

编译后的css:

.class1 { color: #33acfe; margin: 20px; padding: 20px; }
    .class2 { color: #efca44; margin: 10px; padding: 40px; }

**九、@arguments变量**  
@arguments代表所有的可变参数。  
*注意事项*：  
1. @arguments代表所有可变参数，参数的先后顺序就是你的（）括号内的参数的先后顺序。  
2. 在使用的赋值，值的位置和个数也是一一对应的，只有一个值，把值赋值给第一个，两个值，赋值给第一个和第二个，三个值赋值给第三个……以此类推，但是需要注意的是假如我想给第一个和第三个赋值，你不能写（值1，，值3），必须把原来的默认值写上去！

.border3(@x:solid,@c:red){
      border: 21px @arguments;
    }
    .div1{
      .border3(dashed);
    }

编译后的css:

.div1 { border: 21px dashed #ff0000; }

**十、匹配模式**  
传值的时候定义一个字符，在使用的时候使用哪个字符，就调用那条规则。

.border4(all,@w: 5px){ 
      border-radius: @w;
    }
    .border4(t_l,@w:5px){ 
      border-top-left-radius: @w;
    }
    .border4(t_r,@w:5px){ 
      border-top-right-radius: @w;
    }
    .border4(b-l,@w:5px){ 
      border-bottom-left-radius: @w;
    }
    .border4(b-r,@w:5px){ 
      border-bottom-right-radius: @w;
    }
    
    footer{
      .border4(t_l,10px);
      .border4(b-r,10px);
      background: #33acfe;
    }

编译后的css:

footer { border-top-left-radius: 10px; border-bottom-right-radius: 10px; background: #33acfe; }

**十一、混合的返回值**  
在使用混合时，有时会用到一些运算，这时就有返回值。

.average(@x, @y) {
      @average: ((@x + @y) / 2);
      @he:(@x + @y);
    }
    
    footer{
      .average(16px, 50px);
      padding: @average;
      margin: @he;
    }

编译后的css:

footer { padding: 33px; margin: 66px; }

**十二、关键字!important**  
在使用混合属性后面加上!important关键字，则混合中的所有属性都会加上关键字!important。

.fool(@bg:#333;@color: orange){ 
        background: @bg;
        color: @color;
    }
    
    .unimportant{
        .fool;
    }
    .important{
        .fool !important;
    }

编译后的css:

.unimportant { background: #333333; color: #ffa500; }
    .important { background: #333333 !important; color: #ffa500 !important; }