0


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 文件中

@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中变量使用的总结,如其他小伙伴还有什么问题欢迎评论区留言讨论,谢谢~~

标签: less css 前端

本文转载自: https://blog.csdn.net/Star_ZXT/article/details/128839524
版权归原作者 小张同学IT 所有, 如有侵权,请联系我们删除。

“Less 中变量的使用(详解)”的评论:

还没有评论