less学习二---变量

less中声明的变量可以存储css属性值，还可以存储选择器，属性名，url以及@imporant等

变量声明及赋值格式：@variableName : varableValue ;

//属性值

//less

//变量

@pink:pink;

.content{

    color:@pink;

}

编译成

.content{

    color:#ffc0cb;//pink

}

//选择器

@selector:content;

.@{selector}{

    color:pink;

}

//或者
@sector:.content;
@{selector}{
　　color:pink;
}

//编译后都是

.content{

    color:pink;

}

一定要把定义的选择器变量名放在{}里面，并在花括号的前面加@

//url

@img:"../img/";

.content{

    backgrond:url("@{img}/sea.jpg");

}

//编译后

.content{

    background:url("../img/sea.jpg");

}

在定义url变量时，注意将路径用引号扩起来；

／／属性名

@property:color;

.content{

    background-@{property}:green;

    a{

        @{property}:white;

    }

}

//编译后

.content{

    background-color:#00ff00;

}

.content a{

    color:white;

}

在less中可以用一个变量来定义另一个变量

@primary:red;

.content{

    @color:primary;

    background-color:@@color;

}

//或者

.content{

    @color:@primary;

    background-color:@color;

}

//编译后都是

.content{

    background-color:red;

}

less 中的懒加载

即我们可以不需要在使用变量之前使用这个变量

@h:300px;

.content{

    width:@var;

    height:@h;

}

@var:9%;

//编译后

.content{

  width:9%;

  height:300px;

}

当我们重复定义多个变量时，以当前作用域中最后定义的为准，若当前作用域没有定义，则逐级向上寻找；

@var: 0;

.class {

  @var: 1;

  .brass {

    @var: 2;

    three: @var;

    @var: 3;

  }

  one: @var;

}

//编译后

.class {

  one: 1;

}

.class .brass {

  three: 3;

}

在3.0版本中最新的利用$propertyName来获取属性值，有时候利用好了可以使代码看起来更简便

.widget {

  color: #efefef;

  background-color: $color;

}

//编译后

.widget {

  color: #efefef;

  background-color: #efefef;

}

巴特西

less学习二---变量

最新文章

热门文章