less使用

曾经终败给现在 2022-09-04 11:42 187阅读 0赞

# less的特点： #

*  大体上语法同css，但是支持变量，嵌套等特殊用法，使用起来也更方便。
 *  less不能直接运行在浏览器上，得通过转换为css代码，采用用于浏览器

# less语法： #

### 选择器： ###

*      .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            .box2{
                background-color: #bfa;
                .box3{
                    background-color: blue;
                }
            }
            .box4{
                background-color: blueviolet;
            }
        }

*  父元素可以包含后代元素

### 变量： ###

*      @a:100px;
        @b:red;
        @c:box1;
        
        .@{c}{
            width: @a;
            height: $width;
            background-color: @b;
        }
 *  变量语法：@变量名：变量值，，，变量名自己设置，变量值可以是属性值，属性名，块名
 *  属性值使用时，直接使用@变量名；其他变量使用时，需要@\{属性名\}。

### 父元素： ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>.box5{
    &amp;:hover{
        background-color: #bfa;
    }

&amp;-info{
        background-color: red;
    }
}</code></pre> <p></p> </td> 
   <td> <pre><code>.box5:hover {
  background-color: #bfa;
}
.box5-info {
  background-color: red;
}</code></pre> <p></p> </td> 
  </tr> 
 </tbody> 
</table>

*  通过&可以获得括号外的元素名，然后css代码生成时用获得的元素名替换&符号

### 继承拓展： ###

.box6{
        width: 100px;
        height: 100px;
    }
    .box7:extend(.box6){
        background-color: #bfa;
    }

.box7会得到.box6的高度和宽度值。

### 混合函数mixin: ###

.box8(){
        background-color: red;
    }
    .box9{
        .box6();
        .box8()
    }

.box8不会出现在css代码中，但是.box9取可以在css代码里得到.box8的背景属性，使用时，括号可以省略。

### 混合函数更多用法： ###

.box10(@w,@h,@color){
        width: @w;
        height: @h;
        background-color: @color;
    }
    
    .box11{
        .box10(100px,100px,red);
        .box10(@color:red,@w:100px,@h:100px);
    }

### 运算： ###

.box12{
        width: 100px + 100px;
        height: 100px *2;
    }

属性值可以直接参与运算，得到结果，而不用去计算。

### 导入： ###

@import "this-is-valid.less";导入其他的less文件。