css预编译其器,less

##使用less(css预处理器)常见注意点

###1.变量(Variable)

####less中的变量有以下规则：

######1.以@作为变量的起始标识，变量名由字母，数字，_和-组成；

######2.没有先定义后使用的规则；

######3.以最后定义的值为最终值；

######4.可以用于定义值，属性，属性部件，选择器，选择器部件，字符串拼接；

######5.定义时“@变量名：变量值；”的形式；引用时采用“@变量名”或“@{变量名}”的形式；

######6.存在作用域，局部作用域优先级高于全局作用域；

####less代码

@color: color;

@dialog:.dialog;

@suffix:fix;

//空格将被忽略，若要保留空格则需要使用单引号或双引号

@hi:'hello ';

@dear: there;

.dialog {

//用于定义属性部件，必须使用“@{变量名}”的形式

background-@{color}:#888;

//用于定义属性，必须使用“@{变量名}”的形式

@{color}: blue;

}

//用于选择器，必须使用“@{变量名}”的形式

@{dialog}{

width:200px;

}

@{dialog}::after{

content: ':@{h1}@{dear}';//用于字符串拼接，必须使用“@{变量名}”的形式

}

@h: 1000px;

// 用于选择器部件，必须使用“@{变量名}”的形式

.ie-@{suffix} {

@h: 30px; //存在作用域，局部作用域优先级高于全局作用域

height: @h; //用于属性值，两种形式

line-height: 30px;

}

// 1.以@作为变量的起始标识，变量名由字母、数字、_和-组成

// 2.没有先定义后使用的规定；

@dialog-border-color: #666;

@dialog-border-width: 10px;

@dialog-border-width: 1px; // 3.以最后定义的值为最终值；

####最终输出：

.dialog {

background-color: #888;

color: blue;

}

.dialog {

width: 200px;

}

.dialog::after {

content: ': hello there!';

}

.ie-fix {

height: 30px;

line-height: 30px;

}

###2.列表类型

less变量除了支持#FFF, 12px, 12, test等单值类型外,还支持列表类型,通过内置函数extract(返回列表中指定位置的元素)获取列表中的元素,通过内置函数length获取列表的元素个数。

####less代码

@colors: #FFF, #0F0, #F0F;

.skin {

color: extract(@colors, 1); // 注意less数组是从1开始的

height: 12px * length(@colors);

}

####最终输出：

.skin {

color: #FFF;

height: 36px;

}

###3.父选择器引用

####1.才用&引用完整的父选择器

####2.可通过追加和预追加的方式加工&,从而生成新的选择器

####3.通过&::after等方式添加伪元素、伪类样式规则集合

####4.同一个选择器可使用多个&

####5.通过在选择器后添加“空格&”的方式，可将当前选择器排列到最前面

####6.&指向组选择器时,会生成新的组选择器

####less代码：

/*

*采用&引用完整的父选择器

*可通过追加和预追加的方式加工&,从而生成新的选择器

*通过&::after等方式添加伪元素样式规则集合

*同一个选择器可使用多个&

*通过在选择器后添加“空格&”的方式，可将当前选择器排列到最前面

*/

@bg: #aaa;

#ps1 .btn {

background-color: @bg;

border-radius: 5px;

&:hover{

background-color: lighten(@bg, 30%);

cursor: pointer;

}

&-msg, &-eof{

color: blue;

}

.no-borderradius &{

background-image: url('img/btn-bg.png');

}

}

/*

* &指向组选择器时，会生成新的组选择器

*/

#dummy1, .dummy1{

&:hover{

color: red;

}

& + &{

font-size: 12px;

}

}

####最终输出：

/*

* 采用&引用完整的父选择器

* 可通过追加和预追加的方式加工&，从而生成新的选择器

* 通过&::after等方式添加伪元素样式规则集合

* 同一个选择器可使用多个&

* 通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面

*/

#ps1 .btn {

background-color: #aaaaaa;

border-radius: 5px;

}

#ps1 .btn:hover {

background-color: #f6f6f6;

cursor: pointer;

}

#ps1 .btn-msg,

#ps1 .btn-eof {

color: blue;

}

.no-borderradius #ps1 .btn {

background-image: url('img/btn-bg.png');

}

/*

* &指向组选择器时，会生成新的组选择器

*/

#dummy1:hover,

.dummy1:hover {

color: red;

}

#dummy1 + #dummy1,

#dummy1 + .dummy1,

.dummy1 + #dummy1,

.dummy1 + .dummy1 {

font-size: 12px;

}