Less开发常用知识点归纳

桃扇骨 2023-06-06 10:37 27阅读 0赞

**Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，可以运行在 Node 或浏览器端。**

**1.注释**

/*注释编译后依然显示*/
    //编译后不显示

**2.变量**  
示例：

//定义变量
      @width:300px;
     //用法
       div{
        width: @width;
        }
       p{
        width: @width;
        }

**3.混合**

.base{
        width: @width;
        height: 100px;
    }
    div{
        background: pink;
        .base
    }
    p{
        background: green;
        .base;
    }

**4.混合带参，参数带有默认值**

.border(@px:1px,@s:solid,@c:red){
       border:@px @s @c;
    }
    p{
        background: green;
        .base;
        .border(3px);
    }

**5.嵌套**

ul{
        width: @width+50px;
        list-style: none;
        margin: 30px auto;
       li{
           background: pink;
           margin-top: 10px;
           line-height: 40px;
           height: 40px;
           text-align: center;
      //使用&引用父选择器
             &:hover a{
               color: white;
           }
       }
       a{
           text-decoration: none;
           color: black; 
       }
    }

**6.运算（加减乘除均可）**

@width:100px;
    .one{
        width: @width+100px; //200px
    }

**7.@arguments（arguments表示传进来的所有参数）**

.border(@px:1px,@s:solid,@c:red){
       border: @arguments;
    }
    p{
        background: green;
        .base;
        .border(3px);
    }

**8.@import命令，导入其他模块（.css .html .js .less …），若导入的是less文件，less后缀可以省略**

@import 'css2.less';
    
    @import 'css3';

**9.匹配**

.base(a){
        width: 100px;
        height: 200px;
        background-color: red;
    }
    
    .base(b){
        width: 100px;
        height: 200px;
        background-color:green;
    }
    
    div{
        .base(b);
    }

**10.作用域**

less中变量存在作用域，变量的作用域与编程语言一样。