Easy less

维护css弊端

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
Less中文网址：http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus
一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。

less变量

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

  1. //变量的定义  @变量名:值;
  2. @base-color: pink;
  4. div{
  5.   width: 100%;
  6.   height: 40px;
  7.   background-color: @base-color;
  8. }
  9. button{
  10.   width: 60px;
  11.   height: 30px;
  12.   background-color: @base-color;
  13. }
  • 必须有@为前缀
  • 不能包含特殊字符

    less嵌套

    ```html // css写法

    header .logo {

    width: 300px; } // 将css改为less

    header {

    .logo {
     width: 300px;
    } }

// css写法 a:hover{ color:red; } // less写法 // 如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接 a{ &:hover{ color:red; } }

<a name="RBqwu"></a>
### less运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
```html
@w:300px;
@color1:green;
@color2:red;

//制作一个高永远是宽度一半的盒子
div{
  //width: @w - 100;//可以
  //width: @w - 200px ;//可以
  width: @w;
  height: @w/2;
  //background-color: @color1 + @color2;  //可以
  //background-color: @color1 + 15; // 可以
  //background-color: @color1 + yellow; // 不可以
}
  • 乘号（*）和除号（/）的写法
  • 运算符中间左右有个空格隔开 1px + 5
  • 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
  • 如果两个值之间只有一个值有单位，则运算结果就取该单位

    阻止less编译的转义符

    ~""  不想被less解析东西放在~"" 当中
.box{
  //（现在less插件升级了，背景的斜杠它认识）
  // 背景连写中，背景位置与背景大小要用/隔开  
  backgound: url(1.png) top right ~"/" 200px 200px;    
}