LESS 语法

---

变量 @

样式变量

@color:#000;   // 定义
color:@color;  // 使用

样式名变量

@my-name:color;
.ad{
    background-@{my-name}:#000;
}

选择器变量

@banner: portal-banner;
.@{banner}{
    width:100%;
}

变量拼接

@base-url:"/images/"
.ad{
    background-image:url("@{base-url}ad.jpg");
}

父选择器 &

a{
    color:#333;
    &:hover{};            // 输出：a:hover{}
    &-button{};           // 输出： .a-button{}
    &:hover, &-button{};  // 输出：a:hover, a-button{}
    & + &-button{};        // 输出：a + a-button{};  与a同级相邻的a-button

    span &{};        // 输出：span a{}
}

嵌套

.content {
    margin-top:.24rem;

    ul.new-list{
        box-shadow:0 0 10px rgba(0,0,0,.1)
        li{
              font-size:.14rem;
        }
    }
}

继承extend

.master-color{
    color:#000;
}
.title{
    &:extend(.master-color);
}

合并属性 + +_

+合并后用逗号分隔

.box-merge(){
    box-shadow+: inset 0 0 10px #555;
}
.box{
    box-shadow+: inset 1px 1px 20px #333;
}
// 输出：
.box{
    .box-merge();
    box-shadow+: inset 0 0 10px #555, inset 1px 1px 20px #333;
}

+_合并后用空格分隔

.box-merge(){
    transform+_:scale(2);
}
.box{
    .box-merge();
    transform+_:rotate(15deg);
}
// 输出
.box{
    transform: scale(2) rotate(15deg);
}

混合(mixin 1、普通)

带小括号，虽然不带也可以，但是新版本中将必带

// 定义
// 括号中，冒号左侧为参数名，冒号右侧为参数默认值
.f(@fl:left;@w:200px;@h:300px){
    float:@fl;
    width:@w;
    height:@h;
}
// 使用
.left{
    .f();
}
.right{
    .f(right;300px;400px);
}
// 优先使用这个混淆
.left{
    .f() !important;
}

只使用混合中的部分选择器>

.master-mix(){
    .sub{
        font-size:.12rem;
    }
}

.sub-title{
    // 以下三种写法
    .master .sub(); 
    .master-mix.sub();
    .master-mix > .sub();
}

输出所有参数 @arguments

.bs(@x:0, @y:0; @blur:1px; @color:#000){
    box-shadow:@arguments;
}
.box{
    .bs(10px);
}
// 输出
.box{
    box-shadow:10px 0 1px #000;
}

@sizes:{
    content:8rem;
    sub:2rem;
}


.subnav{
    @media (min-width:@sizes[sub]){
        display:block;
    }
}