变量@
变量插值
@mySelector: banner;
.@{mySelector} {
font-weight: bold;
}
延迟加载
变量是延迟加载的,在使用前不一定要先申明
.brass {
@var: 2;
three: @var; //这是的值是3,同级别中最后一个,顺序无所谓
@var: 3;
}
合并属性
使用“+”,“+_”,合并同一个css样式的属性,前者用逗号隔开,后者用空格隔开。
.mixin() {
transform+_: scale(2);
}
.myclass {
.mixin();
transform+_: rotate(15deg);
}
=>
.myclass {
transform: scale(2) rotate(15deg);
}
扩展 extend
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
=>
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
混合 mixins
//混合“类”选择器或者“id”选择器
.a {
color: red;
}
.mixin-class {
.a();
}
//不输出混合集
.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
&:hover {
border: 1px solid red;
}
}
.class {
.my-mixin;
.my-other-mixin;
}
=>
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
.class:hover {
border: 1px solid red;
}
//!important
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
}
.important {
.foo() !important;
}
=>
.important {
background: #f5f5f5 !important;
color: #900 !important;
}
带参数混合
//带参数的混合
.border_width1(@b_width){
border: solid blue @b_width;
}
.test_mix1{
.border_width1(5px);
}
=>
.test_mix1 {
border: solid #0000ff 5px;
}
//参数有默认值的混合
.border_radius(@radius:5px){
border-radius: @radius;
}
.test_radius{
.border_radius();
height: 20px;
}
=>
.test_radius {
border-radius: 5px;
height: 20px;
}
//参数通过它的名称来引用
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
=>
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
模式匹配
.mixin(dark; @color) {
color: darken(@color, 10%);
}
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
@switch: light;
.class {
.mixin(@switch; #888);
}
有的时候,需要一次性将所有的参数全部传进去,此时使用@arguments可以更加方便。
//@arguments代表传进所有的参数
.border_arg(@c:red,@w:3px,@x:solid){
border:@arguments;
}
.test_arg{
.border_arg(40px);
}
注释
- // 不会被编译到css文件中
- /**/ 会编译到css文件中
避免编译
有些情况下,我们不需要less中的某些内容被自动编译,而是保留下来原样放到CSS中,此时可以使用~''
.test_avoid{
width: ~'(300px-100px)';
}
=>
.test_avoid {
width: (300px-100px);
}
.test{
height: calc(~'100% - 100px');
}
=>
.test {
height: calc(100% - 100px);
}
高级用法
循环
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1));
width: (10px * @counter);
}
div {
.loop(3); // 调用循环
}
=>
div {
width: 10px;
width: 20px;
width: 30px;
}