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

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