Web前端学习—基础篇(35)_CSS3预处理：什么是预处理？less如何使用？
6.7、预处理
6.7.1、什么是预处理
一种新语言
基本思想：用一种专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者使用预处理语言进行编码工作
6.7.2、less
- less是什么
less是一种编程语言，主要是为为css增加一些编程的特性，将css作为目标生成文件，然后开发者使用它进行编码工作
less包含一套自定的语法及一个解析器，用户根据语法定义自己的样式规则，这些规则最终通过解析器编译生成对应css文件，只有被编译后的文件才能被浏览器识别
- less如何实现编程特性
扩展css语言，添加了一些新的功能，如：变量、混合、函数、运算。
- 好处：
结构清晰，便于扩展；可以方便地屏蔽浏览器私有语法差异；可以实现多重继承；完全兼容css代码，可以方便地应用到老项目中
6.7.3、预处理编译工具
Koala
6.7.4、less基本语法
1、新建less文件
1、新建一个后缀名为.less文件
2、新建一个后缀名为.less的文件放在less文件夹中.
3、将文件在koala打开，右键单击设置输出路径（新建css文件夹，放置编译后的css文件），执行编译，在html文件中链接编译好的css文件
2、注释
/* 标准css注释，会保留在编译后的文件中 */
//单行注释，只在less源文件中保留，编译后被省略
3、@import导入样式
可以导入css文件、less文件
@import必须写在样式表头部最先声明，后面必须要加分号
语法
@import "*.css";
@import url(*.css);
@import url("*.css");
link和@import的区别
link是html标签；@import是由css定义的
link在页面载入的同时载入；@import在页面加载完成后加载
link无兼容问题；@import在css2.1以下浏览器中不支持
link支持使用JavaScript修改样式；@import不支持JavaScript改变样式
3、变量
在全局样式中可以使用
3.1、定义语法：
@变量名: 值;
@col: red;
@wi: width;
@bo: box;
3.2、使用变量
（1）作为属性值
.box{ background-color: @col; }
（2）作为属性名**
.box{ @{wi}: 200px; }
（3）作为选择器名称**
.@{bo}{ height: 200px;}
4、混入
将一种或一系列属性从一个规则集引入到另一个规则集
4.1、混入类名
（1）定义通用属性
.fo{ color: #f00; } 在解析后的css文件中可以看到
.fo2(){ font-size: 30px; } 在解析后的css文件中看不到
（2）调用定义好的类：
.box{
.fo;
.fo2;
}
4.2、混入参数
(1)混入参数没有设置默认值，调用的时候必须传入参数
.size(@he){ height: @he; }
.box{ .size(200px); }
(2)混入参数设置了默认值，调用时如果不传参，使用默认参数设置；如果传入参数，使用传入参数显示
.radius(@bradiu: 30px){ border-radius: @bradiu; }
.box{
.radius;
.radius(10px);
}
(3)使用@arguments引用所有传入参数
.bor(@bw,@bs,@bc){ border: @arguments; }
.box{
.bor(10px,solid,red);
}
.bor2(@bw:10px,@bs:solid,@bc:blue){ border: @arguments;}
.@{bo}{
.bor2;
.bor2(5px);
.bor2(5px,dotted);
.bor2(5px,dotted,#000);
}
5、嵌套
-
模仿HTML结构——选择器嵌套
-
在嵌套中引用父元素 &
6、运算
数值、变量、颜色运算
-
数值运算
运算符前后用空格隔开 -
变量
-
颜色
