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

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

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

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