less的简单了解

less

Less 和 CSS 非常像，因此很容易学习。less是css预处理语言的一种

变量

@gray: #999;
@size: 20px;
.plusAction a {
  color: @gray;
  font-size: -10 + @size;
}

可以定义颜色和字体大小并引用，改变@gray和@size的样式就能更改样式

混合

.flex() {
  display: flex;
  flex-wrap: wrap;
}
.plusAction .el-form-item__content {
  .flex;
  justify-content: space-between;
}

混合 ，加（）自己本身不显示，把.flex 内容混入到 当前的css规则中

嵌套

.loginBlock {
  h3 {
    font-size: 18px;
    margin-bottom: 16px;
    font-weight: 400;
    span {
      color: dodgerblue;
      font-size: 26px;
      font-weight: 900;
    }
  }
}

将类名为loginBlock元素中的h3和span设置不同的字体颜色，大小等样式

计算

@w: 10px;
.test {
  span {
    display: inline-block;
    height: 44px;
    // background-color: aqua;
    margin: 10px;
  }
  .s1 {
    padding: 0 @w;
  }
  .s2 {
    padding: 0 @w+10;
  }

将@w设为10px并以此为单位，更改@w的计算值就能影响其他调用@w的元素

转义

@str:~".loginBlock .test span";
@b:~"1px solid red";
// 如果作为选择器或者数学 @{变量}
@{str}{
  color:@waring;
  border:@b;
}

将.loginBlock .test span转义至@str，将1px solid red转义至@b

内置函数

@bg:rgb(25, 46, 36);
.test{
  .s1{background-color: @bg;};
  .s2{background-color: lighten(@bg,20%);}
  .s3{background-color: lighten(@bg,40%);}
}

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

@bg表示内置的background-color

命名空间，映射

#bg(){
  background-color: aquamarine;
  font-size: 24px;
}
#colors() {
  primary: blue;
  secondary: green;
  size:24px;
}

与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。因此，下面的 Less 代码示例和上面的代码示例是相同的

注释

注释（单行不可见（less/js），多行可以见（css））

/* 可以看见的 */

导入

@import "library"; 
@import "typo.css";