CSS预处理

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特特性，将CSS作为目标生成文件，然后开发者只要用这种语言进行编码工作。

使用CSS预处理器语言，可以让你的CSS看起来更加的整洁、适应性更强、可读性更佳，更易于代码的维护等诸多的好处。

目前市面上的主要CSS预处理语言有Less,Sass,Stylus三种

使用方法

• 方法一，引入Less.js文件

去官网下载Less.js文件，使用时候引入这两行代码

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="Less.js" type="text/javascript"></script>

• 方法二，软件方式编译
  推荐koala,koala是优秀的编译器，界面清晰简洁，操作起来也非常简单。鉴于koala是免费编译器，简单操作如下图:
  

  

• 方法三，使用编辑器插件

以Hbuild X的插件使用为例子
安装less插件

修改配置

"commands": [
            {
                "id": "LESS_COMPILE",
                "name": "编译less",
                "command": [
                    "${programPath}",
                    "${file}",
                    "../css/${fileBasename}.css"  //此处代表文件地址
                ],
                "extensions": "less",
                "key": "",
                "showInParentMenu": false,
                "onDidSaveExecution": true   //此处代表是否打开自动保存
            }
        ]

完成以上步骤之后，当.less文件保存之后会自动生成一个.css文件

语法

1. 注释

• 标准CSS注释/* comment */，会保留到编译后的文件中。
• 单行注释//comment，之后保留在less源文件中，编译后被省略。

2. 变量
   less允许用户使用变量，变量以@开头

@color:#FF0000;

#div {
    color:@color;
}

@side:left;

#div {
    border-@{side}-radius:5px;
}

3.嵌套

• 选择器嵌套

#header {
    width: 100px;
    #con {
        font-size: 14px;
        h3 {
            background: #00E5EE;
        }
    }
}

编译后的文件

#header {
  width: 100px;
}
#header #con {
  font-size: 14px;
}
#header #con h3 {
  background: #00E5EE;
}

在嵌套的代码中，可以使用&引用父元素。例如a:hover伪类可以写成

a {
   &:hover{color:#FFAD00;}
}

4. 混入

.box {
    border:1px solid black;
    background: skyblue;
}

.inner {
    color: white;
    .box;
}

编译后的文件

.inner {
color: white;
border: 1px solid black;
background: skyblue;
}

• 混入参数

.box(@clolr:red) {
    background: @clolr;
}

#header {
    .box(green);
}

编译结果

#header {
  background: green;
}

混入参数是，如果指定了参数，则使用指定的参数，如果没有指定参数，则使用默认的。当没有指定默认参数时，必须指定参数，负责编译错误。

5. 运算
   任何数字、颜色、或者变量都可以参与运算，运算被包括在括号里面。

.box {width:(200px-20)*2;}

//结果
.box{width:360px;}