less学习二---变量

2018-08-26 17:21:57来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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;
}

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于th,td,tr的一些相关标签

下一篇:css设置属性文本超出隐藏显示...,但有的时候三个点显示不全