1、less中的注释:
以//开头的注释,不会被编译到css文件中
以包裹的注释会被编译到css文件中
2、less中的变量:
a、使用@来声明一个变量:例 @red:red
#main {
@width: 5em;
width: @width;
}
b、作为普通属性值来使用:直接使用@red
c、作为选择器和属性名使用:#@{selector}的形式
// Variables
@my-selector: banner;
// Usage
#@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
d、作为url:@{url}
e、变量是延迟加载的
3、less中的嵌套规则
a、基本嵌套规则
b、&的使用
4、less中的混合:
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
- Mixin定义:LESS 使用 dot 符号(也就是句点)来定义一个 Mixin,并且可以把任意的 CSS 规则作为 Mixin 使用
.alert-variant(@background; @border; @text-color) {
background-color: @background;
border-color: @border;
color: @text-color;
hr {
border-top-color: darken(@border, 5%);
}
.alert-link {
color: darken(@text-color, 10%);
}
}
- Mixin使用:LESS 仍是使用 dot 符号(句点),如果 Mixin 没有参数的话可以省略后面的圆括号
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.a {
.center-block;
}
- Mixin参数形式:如果存在多个参数的话,LESS 使用分号分隔
@state-success-text: #3c763d;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
.has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
a、普通混合(编译到原生css中)
b、不带输出的混合(加双括号)
c、带参数的混合
d、带参数并且有默认值的混合
e、带多个参数的混合
f、命名参数
g、匹配参数
h、arguments变量
5、less继承
性能比混合要高,灵活度比混合低。