scss中声明变量

 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(具体哪些版本不兼容本人并未测试)中并不兼容，请大家谨慎使用!