##使用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;
}