一、注释(Comments)
- 多行注释保留
- 单行注释不被保留在编译生成的 CSS 中
// 这一行被注释掉了!
div {
color: red;
}
二、变量(Variables)
基本使用
@width: 50px;
@height: 100px;
div {
width: @width;
height: @height;
}
变量插值(Variable Interpolation)
- 变量用于
选择器名
、属性名
、URL
、@import语句
- 需要添加
{}
@my-selector: banner;
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
@images: '../img';
body {
color: #444;
background: url('@{images}/white-sand.png');
}
@themes: '../../src/themes';
@import '@{themes}/tidal-wave.less';
延迟加载(Lazy Evaluation)
- 当一个变量被声明多次,会取
最后一次
的值,并从当前作用域往外寻找变量。
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
.class {
one: 1;
}
.class .brass {
three: 3;
}
属性名变量(Properties as Variables)
.widget {
color: #efefef;
background-color: $color;
}
.widget {
color: #efefef;
background-color: #efefef;
}
三、嵌套(Nesting)
- Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
``
```css
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
四、父选择器 (Parent Selectors)
- 在嵌套规则中,
&
表示父选择器,常用于给现有选择器添加伪类
.header {
a {
color: blue;
&:hover {
color: green;
}
}
}
.header a {
color: blue;
}
.header a:hover {
color: green;
}
.button {
&-ok {
background-image: url('ok.png');
}
&-cancel {
background-image: url('cancel.png');
}
&-custom {
background-image: url('custom.png');
}
}
.button-ok {
background-image: url('ok.png');
}
.button-cancel {
background-image: url('cancel.png');
}
.button-custom {
background-image: url('custom.png');
}