Less入门，超好用css写法

目录

变量(Variables)

混合(Mixins)

嵌套(Nesting)

运算(Operations)

转义(Escaping)

函数(Functions)

命名空间和访问符()

映射(Maps)

注释(Comments)

导入(importing)

---

less是一门向后兼容的css扩展语言,跟css非常像，因此很容易学习。而且less对css语言增加了一些方便的扩展，这也是less易学的原因之一

<style lang="less">
    ...
</style>

变量(Variables)

使用方法

@gray进行定义变量名，后跟值，使用时直接使用@gray即可

@gray: #999;
@size: 20px;
a {
  color: @gray;
  font-size: @size;
}

浏览器编译  

a {
  color: #999;
  font-size: 20px;
}

混合(Mixins)

.flex() {
  display: flex;
  flex-wrap: wrap;
}
.plusAction .el-form-item__content {
  // 把.flex 内容混入到 当前的css规则中
  .flex;
  justify-content: space-between;
}

浏览器编译 

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

嵌套(Nesting)

ul {
  list-style: none;
  li {
    line-height: 44px;
    a {
      text-decoration: none;
      &:hover {
        color: red;
      }
    }
  }
}

浏览器编译

ul {
  list-style: none;
}
ul li {
  line-height: 44px;
}
ul li a {
  text-decoration: none;
}
ul li a:hover {
  color: red;
}

 

运算(Operations)

@w: 10px;
.test {
  .s1 {
    padding: 0 @w;
  }
  .s2 {
    padding: 0 @w+10;
  }
  .s3 {
    padding: 0 @w*3;
  }
}

浏览器编译

.test {
  .s1 {
    padding: 0 10px;
  }
  .s2 {
    padding: 0 20px;
  }
  .s3 {
    padding: 0 30px;
  }
}

 

转义(Escaping)

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

浏览器编译

.loginBlock .test span{
  border:1px solid red;
}

 

函数(Functions)

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

命名空间和访问符()

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

映射(Maps)

.testp{
  // .test.s2(); //取选择器里面的所有属性与属性值
  font-size:#colors[size];
  // 映射某一个值
  background-color: .test.s3[background-color];
  背景色为.test.s3的背景色值
}

作用域(Scope)

@color:red;
.loginBlock{
  @color:blue;
  .testp{
    color:@color;//结果为蓝色
  }
}

注释(Comments)

//（单行不可见（less/js），多行可以见（css））
/* 可以看见的 */

导入(importing)

在另一个css或less文件里编写，然后导入使用

@import 'xxx.css'
@import 'xx.less'