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瀏覽器上的兼容性不好，建議不使用。