开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

预处理器LESS语法（一）

变量声明和使用

• 符号 @

@button-color: #3d2c
.submit-button {
  font-size: 18px;
  color: @button-color;
}

加减乘除变量运算

• 符号 + - * / （注意：编写时符号左侧要留空格）

@screen-width: 400px;
@screen-height: 100px;
.main {
  width: @screen-width + 100px;
  height: @screen-height * 2;
}

混合 Mixin

• 编写可重用样式

.border{
    border:solid 5px #fff;
}
.box{
    .border;
    margin:10px;
}

• 带参数的混合

.border(@border-width){
  border: solid @border-width #333;
}
.test {
  .border
}

• 带默认值的混合

.border(@border-width：2px){
  border: solid @border-width #333;
}
.test {
  .border
}

匹配模式

• 选择不同样式调用

.position(r){
     position:relative;/*相对定位*/
}
.position(a){
     position:absolute;/*绝对定位*/
}
.position(f){
     position:fixed;/*静止*/
}
.test {
  .position(r)/*相对定位*/
}

嵌套

• 同html标签层级的样式嵌套

li{
    a {
         color:#ff0000;
         &:hover{
           color:#0000ff;
         }/*&代表它的上一层选择器*/
    }
    span {
      color:#00ff00
    }
}

相当于

li a{color:#ff0000;}
li a:hover{color:#0000ff;}
li span{color:#00ff00}

有序接收传入的所有参数

• 关键字 @agruments

.border(@color: #fff, @so: solid, @width: 2px) {
  border: @arguments;
}