Less开发常用知识点归纳-向日葵屋

Less开发常用知识点归纳

桃扇骨 2023-06-06 10:37 50阅读 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);
}