1. Define variables in scss
$bg-color: #ed795a; //也可以$bg-color: #ed795a !default;这样写 !default 表示是默认值
.btn-default{
background-color:$bg-color;
}
.btn-default{
//编译后是
background-color:#ed795a;
}
Variables in scss also have scope, similar to local variables in js
$bg-color: #ed795a;
.app{
$bg-color: #8ab945;//类似于js的局部变量
}
.btn-default{
background-color:$bg-color;//这里是 #ed795a 而不是.app里的 #8ab945
}
About parameter passing in scss
//@mixin 进行声明 多个参数 , 分割
@mixin wd($width){
width:$width;
}
@mixin h($height:18px){
height:@$height
}
.btn{
// @include进行调用
background-color:$bg-color;
@include wd(32px);
@include h;//不传 则默认18px
}
编译后是
.btn{
background-color:#ed795a;
width:32px;
height:18px;
}
2. The less style definition variable can start with the @ symbol
@bg-color:#8ab945;定义变量bg-color的颜色为#8ab945
.btn-default{
background-color:@bg-color;//获取之前定义的颜色
}
.btn-default{
//编译后
background-color:#8ab945;
}
Parameter passing in less style
//less中定义可传参的样式相比较scss中要简单 多个参数;分割
.wd(@width) {
//无默认值
width:@width;
}
.height(@h:18px) {
//有默认值 18px;
height:@h;
}
.btn {
background-color:@bg-color;
.wd(32px);
.height(22px);
}
//编译后是
.btn{
background-color:#ed795a;
width:32px;
height:22px;
}
3. The variable defined in the css style can start with -, and the corresponding value can be obtained by calling the variable name defined by the var() function where it needs to be used.
body{
//这里限定了变量的作用域是 body
--bg-color:#8ab945;
}
.btn-default{
background-color:var(--bg-color);
}
At present, the variables defined in css are not compatible in ie (which versions are not compatible and I have not tested them), please use it with caution!