欢迎光临qy球友会的网站!公司简介 | 联系我们

某某工厂-专业生产加工、定做各种金属工艺品

国内金属工艺品加工专业厂家
全国服务电话 全国服务电话 401-133-4525
新闻资讯
联系我们
全国服务电话:401-133-4525

传真:+86-193-7867

手机:138 0035 046

邮箱:gwxdn.com

地址:浙江省杭州市

当前位置: 主页 > 新闻资讯 > 公司新闻
Less 中变量的使用(详解)
发布时间:2024-02-11 11:04 来源:[db:来源]

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