移动 web 开发之less

Less 使用之变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

@变量名:值;

• 必须有@为前缀

• 不能包含特殊字符

• 不能以数字开头

• 大小写敏感

@color: pink;

Less 嵌套

// 将css改为less
#header .logo {
   300px;
}
​
#header {
    .logo {
        300px;
    }
}

如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  }
}

　　

Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
 (@width + 5) * 2;
​

• 乘号（*）和除号（/）的写法

• 运算符中间左右有个空格隔开 1px + 5

• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

• 如果两个值之间只有一个值有单位，则运算结果就取该单位