SASS詳解

之前看到SASS之類的工具以爲應該比較難，今天接觸了以後發現挺好用的，主要是方便了CSS的編寫。在編寫比較大的項目的時候，因爲內容不少，所以樣式表也會比較繁雜，若是要修改其中某一個的名字，就會維護起來很麻煩。所以才須要用到SASS這樣的工具來優化CSS結構。

通常有SCSS和SASS兩種，這兩種的文件後綴名是不同的，編寫起來也會有差別。因爲SCSS的寫法更接近CSS，所以我比較喜歡SCSS的寫法。（SASS是沒有大括號的，僅僅用縮進來表示層次，這一點和python是很像的）

準備

安裝

因爲SCSS是須要編譯的。我就直接簡略關於編譯配置方法的環節。

1. 安裝ruby。http://rubyinstaller.org/downloads

2. 命令行安裝SASS。

3. 安裝好了能夠在命令行調用sass --version。若是顯示版本號就是安裝好啦。

具體能夠看慕課網SASS教程

編譯方法

在命令行輸入

sass srcFile.scss:destFile.css//編譯單個文件
sass srcDir/:css/;//編譯整個srcDir文件夾到css文件夾

也就是sass [s]:[d]這樣的語法（下文中我都這樣寫）。

使用

剛剛是一些基本用法，還有一些參數能夠用。

編譯參數

1.--watch

上面的寫法其實比較麻煩，由於咱們通常寫css都是會反覆修改的，那麼咱們每次改了SCSS都須要再次編譯，顯得很麻煩。所以咱們可使用--watch參數監視每一次的更改，這樣在修改CSS以後都會自動編譯。具體以下：

sass --watch [src]:[dest];//src和dest既能夠是文件也能夠是文件夾

若是咱們修改了SCSS，控制檯就會輸出

Change detected to: scss/test.scss
      write scss/css/test.css
      write scss/css/test.css.map

2. style

因爲不一樣的同窗寫CSS都有本身的習慣，所以這個參數就是爲了讓編譯後的CSS更美觀。
語法是sass --watch [src]:[dest] --style property這個property就是下面描述的內容。

---

nested

默認就是nested編譯結果是最多見的書寫方法。

body{
    p{
        color:red;
    }
    ul{
        background-color:green;
    }
}

編譯結果

body p{
    color:red;}
body ul{
    background-color:green;}

expanded

就是編譯出來的右大括號會另起一行

compact

輸出的css會少不少換行

compressed

沒有空格沒有換行

.box,.size{margin-left:5px}

變量

SASS相似與一些編程語言。會先定義一些變量並給他們賦值，而後再在樣式表中調用。這樣咱們在維護CSS的時候就只須要把這些變量的值修改就能夠了，比較方便。廢話很少說直接看代碼：

$varGlobal:500px;
.container{
    $varLocal:20px;
    width:$varGlobal;
    height:$varLocal;
}

看上面的代碼就知道，SASS引入了局部變量和全局變量，和其餘語言用法差很少的就不贅述了。

嵌套

先前已經提到告終構的嵌套。還支持屬性嵌套和僞類嵌套。

屬性嵌套

好比font就有不少屬性：font-size、font-weight等。咱們能夠這樣嵌套

font:{
    size://
    weight://
}

注意font後面有一個冒號，否則就和結構嵌套是同樣的了

僞類嵌套

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    &:after {
        clear:both;
        overflow: hidden;
      }
}

用法就是加一個&:
調用混合宏

混合宏

感受這個是SASS的比較強大的地方，先看代碼

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
button {
    @include border-radius;
}

這時候編譯結果爲

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

至關於就是一個代碼塊的調用。另外混合宏還能夠傳入參數

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

至關因而一個函數的寫法了。在調用的時候傳入參數便可

.box {
  @include border-radius(3px);
}

還能夠給默認值

@mixin border-radius($radius：3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

注意css中都是用冒號表示相等。不用等號

帶@的語句通常都不加冒號，直接空格

繼承

.size{
    background-color:#777;
}
.box{
    @extend .size;
}

佔位符

%placeholder

這種寫法在不調用以前不會產生任何css代碼。我我的感受比較像是一個基類。用法就是和繼承同樣的。

.body{
    @extend %placeholder
}

這裏貼一張慕課網拿到的表格。

SASS基礎就先寫到這裏，還有不少高級用法之後再補充~