less
less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,
增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。
less的中文官网:http://lesscss.cn/
bootstrap中less教程:http://www.bootcss.com/p/lesscss/
Less编译工具
koala 官网:www.koala-app.com
less中的注释
以//开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
less中的变量
使用@来申明一个变量:@pink:pink;
1.作为普通属性值只来使用:直接使用@pink
2.作为选择器和属性名:#@{selector的值}的形式
3.作为URL:@{url}
4.变量的延迟加载
less中的嵌套规则
1.基本嵌套规则
2.&的使用
less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
在less中混合前面+"."
1.普通混合
.mixin{} /*该混合样式及混合名,编译后,会被添加到css当中去(不会用这种方式)。*/
2.不带输出的混合
.mixin () {} /*在混合名后面加(),编译成css就不会写入。*/
3.带参数的混合
定义混合(比如写一个居中的通用样式)
.juzhong(@w,@h,@c){
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: @w;
height: @h;
background: @c;
}
在页面元素中使用
#box1{
.juzhong(100px,100px,pink); /*在该混合项中依次传入参数*/
z-index: 1;
}
4.带参数并且有默认值的混合
.juzhong(@w:100px,@h,@c){ /*在参数用“:”来指定形参默认值*/
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: @w;
height: @h;
background: @c;
}
5.带多个参数的混合
6.命名参数
.juzhong(@w:100px,@h:100px,@c:pink){
width: @w;
height: @h;
background: @c;
}
#box2{
.juzhong(@h:200px;@c:deeppink;);/*当实参个数与形参个数不一致时,实参可以指定实参传值*/
}
7.匹配模式
8.arguments变量
less运算
在less中可以进行加减乘除的运算(计算的一方带单位就可以了,多个单位取第一个单位)
less避免编译
当有时候,用到css的calc函数让浏览器来计算,我们不希望less编译,
在less中避免编译用~""包裹起来。
width:~"calc(200px + 700px)";
less继承
性能比混合高
灵活度比混合低
/*定义一个通用的样式类common*/
.common:hover{
background: pink;
}
.common{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
/*通过&来父级引用,用extend()函数*/
.juzhong(@w:100px,@h:100px,@c:pink){
&:extend(.common all);/*all,表示有关于common的所有样式,比如hover都去继承*/
width: @w;
height: @h;
background: @c;
}
/*在元素中应用juzhong这个混合*/
#box1{
.juzhong();
z-index: 1;
}
#box2{
.juzhong(@h:200px;@c:deeppink;);
}
/*最终编译的成css,#box1和#box2都会继承common的样式*/
.common:hover,
#box1:hover,
#box2:hover {
background: pink;
}