Less 中变量的使用（详解）

less是css的扩展。他扩展了变量、mixin、函数等功能，使得css代码写的更有效率，本篇主要先介绍less的变量。

一、变量正常用法（variables）

.less 文件中

@link-color: #000; 
.btn {
  color: @link-color;
}

编译后的css文件

.btn {
  color: #000;
}

二、变量作为选择器名称使用

语法：变量声明：@变量：值 --------使用：.@{变量}

.less 文件中

@my-selector: btn;
.@{my-selector} {
    color: #000;
}

编译后的css文件

.btn {
    color: #000;
}

三、变量作为属性名称使用

使用方法与作为选择器名称使用一样：

.less 文件中

@property: color;
.@{property} {
    @{property}: red;
    background-@{property}: green;
}

编译后的css文件

.color {
  color: red;
  background-color: green;
}

四、变量作为变量名使用

在.less文件中，可以使用变量定义另一个变量

.less 文件中

扫描二维码关注公众号，回复： 16452489 查看本文章

@primary: red;
@secondary: blue;
.section {
    @color: primary;
    .element {
        color: @@color;
    }
    p {
        color: @secondary;
    }
}

编译后的css文件

.section .element {
  color: red;
}
.section p {
  color: blue;
}

五、变量的Lazy Evaluation

变量在使用之前可以不必声明，可以在使用之后声明，如果存在局部变量，那么该作用域的属性会引用局部变量，如果不存在局部变量，那么后面声明的变量会覆盖前面声明的变量（如果声明了两个局部变量，同理）

.less文件中

.lazy-eval {
    width: @var;
    @a: 100px;
}
@var: @a;
@a: 80px;
@a: 40px;

编译后的css文件

.lazy-eval {
  width: 100px;
}

六、属性作为变量

使用$prop语法将属性当作变量来使用

.less文件中

.widget {
    color: red;
    background-color: $color;
}
.ul {
    height: 20px;
    .li {
        padding: $height;
    }
    height: 40px;
}

编译后的css文件

.widget {
  color: red;
  background-color: red;
}
.ul {
  height: 20px;
  height: 40px;
}
.ul .li {
  padding: 40px;
}

以上就是我对Less中变量使用的总结，如其他小伙伴还有什么问题欢迎评论区留言讨论，谢谢~~