我的less学习之路

Posted 2020-10-07 小目标

less注释

可以在代码中使用块样式（/* */）和行内注释(//)，但是当编译LESS代码时，单行注释不会显示在CSS文件中。开发中主要维护的是less文件，所以可以使用行内注释，最终编译的css文件中不会有注释。

less变量

LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。例如：@width：300px

less混合

混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。 在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。

可以创建一个mixin，它可以通过简单地放置括号后在输出中消失。

.a(){
  padding-left: 100px;
}
.myclass{
  background : #64d9c0;
  .a;
}

最终输出的css为：

.myclass {
  background: #64d9c0;
  padding-left: 100px;
}

也可以传递参数

.border_radius(@radius:5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.test{
  width:300px;
  height:200px;
  .border_radius(10px);
}

编译之后的css代码为：

.test {
  width: 300px;
  height: 200px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

 

less嵌套

它是一组CSS属性，允许将一个类的属性用于另一个类，并且包含类名作为其属性。

.container{
     h1{
         font-size: 25px;
         color:#E45456;
        }
     p{
          font-size: 25px;
          color:#3C7949;
      }
  }

less操作

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。

@fontSize: 10px;
.myclass {
 font-size: @fontSize * 2;
 color:green;
}