css学习——css变量声明和调用

1、css变量的声明和调用
以–开头即可，在需要用到的地方以var()函数调用定义的变量名即可获

body{ //这里限定了变量的作用域是 body
   --bg-color:#8ab945;
}
 
.btn-default{
   background-color:var(--bg-color);
}

<div style="--bg-color:#FFFFFF"></div>

2、scss中定义变量

• 使用$开头定义变量，变量可以直接使用
• @import导入其它模块的样式

@import '../../static/style/constant.scss';
$bg-color: #ed795a; //也可以$bg-color: #ed795a !default;这样写 !default 表示是默认值
 
.btn-default{
   background-color:$bg-color;
}
 
.btn-default{//编译后是
    background-color:#ed795a;
}

3、less样式
定义变量以@符号开头即可

@bg-color:#8ab945;定义变量bg-color的颜色为#8ab945
 
.btn-default{
   background-color:@bg-color;//获取之前定义的颜色
}
 
.btn-default{//编译后
   background-color:#8ab945;
}```