1.scss中定义变量

$bg-color: #ed795a; //也可以$bg-color: #ed795a !default;这样写 !default 表示是默认值
.btn-default{
   background-color:$bg-color;
}
 
.btn-default{//编译后是
    background-color:#ed795a;
}
scss中的变量也存在作用域，类似于js中的局部变量
$bg-color: #ed795a;
 
.app{
	$bg-color: #8ab945;//类似于js的局部变量
}
 
.btn-default{
   background-color:$bg-color;//这里是 #ed795a 而不是.app里的 #8ab945
}

关于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.less样式 定义变量

以@符号开头即可

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

less样式中进行参数传递

//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.css样式 中定义变量

以--开头即可，在需要用到的地方以var()函数调用定义的变量名即可获取对应值。

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

目前css中定义的变量在ie(具体哪些版本不兼容本人并未测试)中并不兼容，请大家谨慎使用!