less
less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,
增加了变量、Mixin(混合)、函数等特性,使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 (引入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中的变量
使用@来申明一个变量:@name:value; //@变量名:值
1.作为普通属性值只来使用:直接使用变量名 @name
2.作为选择器和属性名时要使用 @{name} 的形式
3.作为URL:例如: @p : 323911.jpg;
使用时 background-image: url("@{p}");
4.变量的延迟加载:即对所有变量的声明都会提到最前,变量提升
less中的嵌套规则
1.基本嵌套规则:子元素写到父元素中
2.&的使用:去掉编译后父子中间的空格,即让子元素成为父元素的同级
例如:.father{
&:hover{
}
}
编译后为:.father{}
.father:hover{}
less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式,类似于引用
例:定义一个混合内容 .mixin{font-size:20px;}
1.普通混合 :混合的内容会添加到编译后的css文件中
2.不带输出的混合 :在混合名称后添加一个空括号,
混合内容将不会添加到编译后的css文件中
.mixin(){font-size:20px;}
3.带参数的混合 :定义混合时设置形参,在调用时即可传入对应的参数
定义一个混合 .mixin(@a){font-size:@a;}
4.带参数并且有默认值的混合 :在参数后面添加 :value 及为参数的默认值
定义一个混合 .mixin(@a:20px){font-size:@a;}
5.带多个参数的混合 :多个参数之间用逗号隔开
6.命名参数 :当混合中有多个参数时,只想给其中一个参数传入值,
那么调用时可以知名是哪个参数 指明形式为 [参数名:值]
7.匹配模式 :定义混合时,可在前面加一个标识符来区分不同的混合,
调用时也要用此标识符来指明
8.arguments变量 :缩写方法,例如定义一个混合时:
.mixin(@size,@solid,@color){
border:@arguments;
// 相当于 border: @size @soild @color;
}
less运算
在less中可以进行加减乘除的运算
less避免编译
~"不被编译的内容",预处理器将不会编译此内容
less继承
性能比混合高
灵活度比混合低
例如:.mixin(){font-size:20px;}
那么使用继承时:
.div:extend(.mixin){
background-color: red;
}
编译后的形式为:.mixin , .div{
background-color: red;
}
.div{
background-color: red;
}