vuiecli项目中用到了scss来书写页面

在刚刚完成的vuecli2.0项目中我们使用scss来对组件的样式进行设计，由于项目比较棘手，好多代码需要进行优化。

在scss中，我们常用的变量的使用情况。

1.scss中定义变量

$theme-color: #FCFDFD;
$theme-height:124px;
$all-bg:#042144;
// 中间头部字体的大小
$header-title-font:32px;


.el-row {
  margin-bottom: 4px;
  // background: $theme-color;
  background: url("../../static/img/monitor00.png") no-repeat center;
  background-size: 98% 90%;
  height: $theme-height;
}

2. 要注意的几个点为：该变量和js的变量相似也存在作用域。

 

$bg-color: #ed795a;
 
.app{
	$bg-color: #8ab945;//类似于js的局部变量
}
 
.btn-default{
   background-color:$bg-color;//这里是 #ed795a 而不是.app里的 #8ab945
}

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

虽然css本身就好 --   的变量表示法，但考虑到其在ie浏览器上的兼容性不好，建议不使用。