css、less中定义变量使用变量

划船不用桨--

已于 2022-02-19 04:47:46 修改

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

于 2021-12-26 11:16:23 首次发布

本文链接：https://blog.csdn.net/weixin_43663349/article/details/122152962

css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了CSS和LESS中定义及使用变量的方法。在CSS中，通过`:root`选择器定义全局变量，如`--color-text`，然后在样式中使用`var(--variable-name)`来引用。同时，CSS变量可以通过JavaScript动态改变。而在LESS预处理器中，使用`@variable`定义变量，并在需要的地方直接调用，如`@test-width`和`@test-height`。这两个技术增强了代码的可维护性和复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中定义使用变量

比如：在根元素下定义一些变量，

//：root使得所有人可访问
:root {
  --color-text: #666;
  --color-high-text: #ff5777;
  --color-tint: #ff8198;
  --color-background: #fff;
  --font-size: 14px;
  --line-height: 1.5;
}

使用变量

a {
  color: var(--color-text);
  text-decoration: none;
}

还可以通过js改变变量的值，从而改变属性

${this.name}是解析变量的写法

less中定义使用变量

less定义变量
@变量名：变量值

//定义变量
 @test-width:200px;
 @test-height:300px;

使用

.testDiv{
    width:@test-width;
    height:@test-height;
    background-color: aquamarine;
}