一、CSS预编译
常见的css预编译器有三种：less 、sass 、stylus。
Bootstrap使用的是less。
二、less
Less是一门css预处理语言，它扩展了css语言，增加了变量、Mixin、函数等特性，使css更易维护和扩展，他不是一个直接使用的语言。而是一个生成css的语言。Less可以运行在Node或浏览器端。
Css计算：cacl()；
三、使用方法：
1．Node环境
2．浏览器环境
引入less文件，类似于css文件，但是类型不一样。
引入解析的less的less.js
下载地址：https://raw.github.com/less/less.js/v2.5.3/dist/less.min.js
四、快速起步
Document
五、Less语法
1．变量
1)普通的变量
Less的变量是以 @ 开头 定义变量，并且使用时 直接 键入 @名称。
注意：作为属性值的变量不能添加大括号。
@color：#333；
div{
Background:@color;
}
Less其变量只能定义一次，不能重复定义，否则后面的会类似于js的变量提升，覆盖前面的变量值。
使用变量设置css，也方便代码的维护。
2)选择器变量
让选择器变成动态，作为选择器的变量在使用的时候需要添加大括号。变量前面可以添加选择操作符。
/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#666;
}
/* 生成的 CSS */
#wrap{
color: #999;
width: 50%;
}
.wrap{
color:#ccc;
}
#wrap{
color:#666;
}
3)属性变量
属性变量可以让我们书写的时候少写很多东西。属性变量使用的时候也需要添加大括号。
/* Less */
@borderStyle: border-style;
@Soild:solid;
#wrap{
@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}
/* 生成的 CSS */
#wrap{
border-style:solid;
}
4)url变量
项目结构改变时，修改其变量即可。目的是为了方便项目的维护。
/* Less */
@images: "../img";//需要加引号
body {
background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}
/* 生成的 CSS */
body {
background: url("../img/dog.png");
}
5)申明变量
定义：@name：{
Key.value;
Key.value;
}；
使用：@name();
/* Less */
@background: {background:red;}; #main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#con{
@Rules();
}
/* 生成的 CSS */ #main{
background:red;
} #con{
width: 200px;
height: 200px;
border: solid 1px red;
}
6)变量运算
-加减法时 以第一个数据的单位为基准
-乘除法时 注意单位一定要统一
/* Less */
@width:300px;
@color:#222; #wrap{
width:@width-20;
height:@width-20*5;
margin:(@width-20)*5;
color:@color*2;
background-color:@color + #111;
}
/* 生成的 CSS */ #wrap{
width:280px;
height:200px;
margin:1400px;
color:#444;
background-color:#333;
}
7)变量的作用域
不是指代码的位置，而是指代码的层次结构。
同一级的变量，后面的生效，类似于提升。
不同级的变量，距离最近的生效。距离是指与定义是的位置
8)变量的变量
解析的顺序是从后向前逐层解析
/* Less */
@fnord: "I am fnord.";
@var: "fnord";
#wrap::after{
content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
content: "I am fnord.";
}
2．嵌套
1)&符号
&符号表示的是上一级
相当于直接替换成上一级的文本
/* Less */
#header{
&:after{//注意不能使用&符号，如果省略会给每一个子元素添加after
content:"Less is more!";
}
.title{
font-weight:bold;
}
&_content{//理解方式：直接把 & 替换成 #header
margin:20px;
}
}
/* 生成的 CSS */
#header::after{
content:"Less is more!";
}
#header .title{ //嵌套了
font-weight:bold;
}
#header_content{//没有嵌套！
margin:20px;
}
2)嵌套覆盖原有样式
div{
width:200px;
height:200px;
background:red;
.show{
display: none;
}
}
.show{
display: block; //只有在div使用的时候被覆盖
}
3．媒体查询
之前我们在写媒体查询的时候都是先分屏幕类型，然后在每一个媒体查询中设置样式
@media only screen and (min-width:1200px){
div{}
}
@media only screen and (min-width:992px){
div{}
}
@media only screen and (min-width:768px){
div{}
Less提供给我们更加方便的一种方式。
/* Less */
#main{
//something...
@media screen{
@media (max-width:768px){
width:100px;
}
}
@media tv {
width:2000px;
}
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
#main{
width:100px;
}
}
@media tv{
#main{
width:2000px;
}
}
唯一的缺点就是 每一个元素都会编译出自己 @media 声明，并不会合并。
4．方法
1)无参数方法
. 与 # 皆可作为 方法前缀，可以不使用小括号，但是为了避免与css格式混淆，建议加上小括号。
.card(){
//something...
}
#wrap{
.card();
}
2)具有参数的方法
Less的方法可以传递参数
.setSize(@width_size,@height_size){
width:@width_size;
height:@height_size;
}
div{
.setSize(200px,300px);
}
3)默认参数方法
Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数。
@arguments 犹如 JS 中的 arguments 指代的是 全部参数。
传的参数中 必须带着单位。
/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
border:solid 1px @color;
box-shadow: @arguments;//指代的是 全部参数
}
#main{
.border(0px,5px,30px,red);//必须带着单位
}
#wrap{
.border(0px);
}
#content{
.border;//等价于 .border()
}
/* 生成的 CSS */
#main{
border:solid 1px red;
box-shadow:0px,5px,30px,red;
}
#wrap{
border:solid 1px #000;
box-shadow: 0px 50px 30px #000;
}
#content{
border:solid 1px #000;
box-shadow: 10px 50px 30px #000;
}
4)不定参
不确定参数的个数使用...
/* Less */
.boxShadow(...){
box-shadow: @arguments;
}
.textShadow(@a,...){
text-shadow: @arguments;
}
#main{
.boxShadow(1px,4px,30px,red);
.textShadow(1px,4px,30px,red);
}
/* 生成后的 CSS */
#main{
box-shadow: 1px 4px 30px red;
text-shadow: 1px 4px 30px red;
}
5)方法的匹配模式
有点类似于多态。有点类似于switch case。
同一个方法名的多个方法，由于传入的参数不用而实现不同的功能。
.triangle(right,@width:20px,@color:#000){
border-color:transparent @color transparent transparent ;
}
.triangle(bottom,@width:20px,@color:#000){
border-color:@color transparent transparent transparent ;
}
.triangle(left,@width:20px,@color:#000){
border-color:transparent transparent transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
border-style: solid;
border-width: @width;
}