sass使用記錄

前言

sass是一款css預處理程序，它能提供一些css本身不具備的特性，比如：變量,嵌套，mixins，繼承等。

安裝、更新、卸載

1. sass依賴於ruby，所以要先安裝ruby。下載地址
2. ruby安裝成功後（記得配好環境變量），執行
   gem install sass
3. double-check。執行
   sass -v
   如果返回
   Sass 3.4.21 (Selective Steve)
   表明sass已經安裝成功。
4. 更新：當有新的sass版本時，執行
   gem update sas
   即可更新。
5. 卸載：執行
   gem uninstall sass

編譯

命令行編譯

命令格式

sass src:dest
1. 編譯單個文件
sass --watch a.scss:/home/b.css
1. 編譯整個文件夾裏的所有scss文件
sass --watch /home/sass/:/home/
常用參數

注意：–watch參數表示如果文件有變化，則會自動編譯一次。避免每次都手動執行。

常用參數

–watch 監視文件變化，編譯文件
–update 監視文件變化，更新css文件
–style params params可以取以下值：

nested：嵌套縮進的css代碼 （具有嵌套關係的元素樣式 以縮進的方式顯示）。該選項是默認的
expanded：展開的多行css代碼（跟平時寫css樣式差不多）
compact：簡潔格式的css代碼（每個元素在一行）
compressed：壓縮後的css代碼（去掉空格、分行等，壓縮在一起）

使用

變量

變量聲明方式：$width:30px
在元素、mixin之外聲明的變量爲全局變量，在其它地方聲明的變量爲局部變量。
------------------------------------------------------------------
a.scss
--------------------------------
$global:30px;
body {
  $local:40px;
}

嵌套

//scss style
//------------嵌套-------------------
body {
    nav {

    }
}
注意嵌套層次不要太高，否則生成的css 縮進太多，不好理解。

mixin（混合宏）

//scss style
//---------mixin 的聲明---------------------------
<b>混合宏聲明使用關鍵字@mixin</b>
//不帶參數的mixin
@mixin border-radius(){

}

//帶參數的mixin
@mixin border-radius($para:20px){
    border-radius:$para;
}
//------------------------------------------------
//------mixin 的調用,使用關鍵字@include------------
@include border-radius(3px);
//-------------------------------------------------
//--------------傳多個參數--------------------------------
聲明：
@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

調用：
.box-center {
  @include center(500px,300px);
}
//-------------------------------------------------------------
//------------當需要的參數過多時，可以使用...---------------------

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }

繼承

/**關鍵字**/
sass 繼承使用@extend關鍵字
/*******************************示例********************/
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

/*****************編譯後的結果********************/
//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}
==================================================
@extend與%placeholder(佔位符)結合使用的效果
//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}
編譯後效果
//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

注意事項

1. scss文件編碼格式不支持gbk，所以編寫時注意將編碼格式設置爲utf-8。
2. scss文件所在路徑中文支持不夠友好，建議路徑全爲英文，否則容易出現編譯錯誤。
3. @mixin，@extend，%placeholder的關係css
*使用混合宏（@mixin），生成的css代碼，會在調用的地方產生多個樣式。
*使用繼承（@extend）,生成css代碼時，會根據樣式，將具有相同樣式的元素以組合選擇器的形式放在一起，看起來更整潔。
*使用佔位符（%placeholder）,生成css代碼時，跟使用@extend有相同的效果。不同的是，使用%placeholder時，不會在css中生成佔位符的選擇器。更簡潔了，不是嗎？