less
- Less(Leaner Style Sheets )是一门向后兼容的 CSS 扩展语言。
- 是一种动态样式语言,对CSS赋予了动态语言的特性;
变量(Variables)
- 变量可以单独自定义一系列通用样式,在需要的时候可以调用。
Less代码
// 可以自定义样式
@width: 10px;
@height: @width + 10px;
// 在需要的地方调用即可
#header {
width: @width;
height: @height;
}
编译后的CSS的代码
#header {
width: 10px;
height: 20px;
}
混合(Mixins)
- 可以将定义好的一组类
class
/id
的属性,引入到另一组类class
/id
的属性中
Less代码
// 已经定义好的类
.box{
color: #ccc;
border: 1px solid #ccc;
}
//把定义好的类引入到其他类中
#main{
font-size: 12px;
//引入box的属性代码
.box()
}
编译后的CSS的代码
.box {
color: #ccc;
border: 1px solid #ccc;
}
#main {
font-size: 12px;
/*引入box的属性代码*/
color: #ccc;
border: 1px solid #ccc;
}
嵌套(Nesting)
- 可以用使用一个选择器嵌套另一个选择器来书写代码(模仿了 HTML 的组织结构)实现继承;
- 使代码更加简洁;
Less代码