demoshop

官方網站

http://compass.handlino.com/

前一篇文章介紹了compass.app的使用方式，這一篇文章要講一些基本的SCSS語法，讓沒有用過的人可以比較容易上手。

先解釋一下文章裡一下子Sass一下子SCSS的並不是我寫錯字，而是Sass支援兩種語法，一種是比較新的"SCSS"，而另一種比較舊的就叫做"Sass"。它們兩個的長相也相差蠻多的，SCSS的語法和平常寫的CSS比較相近，如果將CSS直接貼到SCSS檔案中也是完全相容的，也因此本來就習慣CSS的設計師很快就能上手；而Sass則是用縮排來代替大括弧，所以直接貼css進去是會爆炸的喔！總之雖然使用Sass來寫可以少寫一點字，但我對於花時間適應它完全沒興趣...還是請有興趣的人自己去官網研究吧。順帶一提compass.app是可以支援Sass語法的，要使用的話請記得去Preference裡面更改設定值。

下面還是回到SCSS語法，主要參考官網的說明和這份超棒的投影片撰寫如下：

Nesting 巢狀寫法

個人覺得這是SCSS最直覺易懂的部分，當寫css的時候經常會為了寫同一個區塊的不同元素而重複寫很多次同樣的階層，像是"#navbar ul"、"#navbar li"、"#navbar li a"...這樣就重複寫了很多次#navbar，實在有點浪費生命。SCSS的巢狀寫法讓我們可以省下這些工夫，像上面這些東西在SCSS裡面只要寫：

#navbar {
  width: 80%;
  height: 23px;

    ul {
      list-style-type: none;
    }
    li {
      float: left;
      a { font-weight: bold; }
    }
  }

存檔之後compass.app就會幫我們轉換成這樣的CSS：

#navbar {
    width: 80%;
    height: 23px; 
  }
  #navbar ul {
    list-style-type: none; 
  }
  #navbar li {
    float: left; 
  }
  #navbar li a {
    font-weight: bold; 
  }

 

馬上就可以少寫很多東西！讓效率更提昇！

 

Parent References 父層參照

好吧我承認中文是我亂翻的，實在不知道要怎麼翻，看範例比較容易懂。總之在SCSS裡面可以使用「&」這個符號來表示目前所在的這個階層，像是要寫link的Pseudo-classes，可以直接寫成：

  a {
    color: #ce4dd6;
    &:hover { color: #ffb3ff; }
    &:visited { color: #c458cb; }
  }

轉出來的CSS會是這樣：

  a {
    color: #ce4dd6;
  }
  a:hover {
    color: #ffb3ff;
  }
  a:visited {
    color: #c458cb;
  }

當然不只是這麼簡單的應用，它還可以用在其他地方像是：

  #box {
    h2 {
      font-size: 2em;
      .special & { font-size: 3em; }
    }
  }

產生出來的CSS會是這樣：

  #box h2 {
    font-size: 2em;
  }
  .special #box h2 {
    font-size: 3em;
  }

當結構很複雜的時候用起來可以避免重寫很多麻煩的東西。

---

Variables 變數

SCSS可以支援使用變數，相信這讓很多會寫程式的人相當心動XD。
在SCSS裡的變數和PHP變數一樣都是用$符號開頭的，使用起來像這樣：

  $main-color: #ce4dd6;

  #navbar {
    color: $main-color;
    border-bottom: $main-color 2px solid;
  }

可想而知產生出來會是這樣：

  #navbar {
    color: #ce4dd6;
    border-bottom: #ce4dd6 2px solid;
  }

很多東西設成變數後即使需要修改，也不用一個一個慢慢改了！是讓CSS變得好維護的利器。

 

當然，變數不只可以用在屬性值裡面，它也可以這樣用：

$side: top;
$radius: 10px;

.rounded- {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}

注意在把變數塞到屬性名稱或selector的時候要用「#{}」包起來才不會爆炸！上面這一段會變成：

  .rounded-top {
    border-top-radius: 10px;
    -moz-border-radius-top: 10px;
    -webkit-border-top-radius: 10px;
  }

---

Mixins

接下來連要硬凹成中文都不知道要怎麼凹了 =.=...只好維持原樣。
它是一個強大的可重複利用片段，在開頭的地方用「@mixin」宣告一整個段落後，便可以在其他地方使用「@include [mixin的名稱]」來取用，看範例比較好懂：

  @mixin hover-link {
    text-decoration: none;
    &:hover { text-decoration: underline; }
  }
  nav a { @include hover-link; }

意思是寫好了一個hover-link的mixin之後再從"nav a"把它叫出來用，CSS會變成這樣：

  nav a {
    text-decoration: none;
  }
  nav a:hover {
    text-decoration: underline;
  }

可以看見mixin的部份並不會被輸出到css中，只有被取用而生成的部份會出現。

 

同樣的mixin也沒有這麼單純，它還可以跟前面提過的變數搭配使用：

 @mixin rounded($side, $radius: 10px) {
    border-#{$side}-radius: $radius;
    -moz-border-radius-#{$side}: $radius;
    -webkit-border-#{$side}-radius: $radius;
  }

  #navbar li { @include rounded(top); }
  #footer { @include rounded(top, 5px); }
  #sidebar { @include rounded(left, 8px); }

可以看到使用了「rounded($side, $radius: 10px)」這樣的寫法，「$radius: 10px」使$rasius這個變數有了預設值，若是沒有傳變數進去的話便會是10px。所以產生出來的CSS是這樣：

  #navbar li {
    border-top-radius: 10px;
    -moz-border-radius-top: 10px;
    -webkit-border-top-radius: 10px;
  }
 
  #footer {
    border-top-radius: 5px;
    -moz-border-radius-top: 5px;
    -webkit-border-top-radius: 5px;
  }
 
  #sidebar {
    border-left-radius: 8px;
    -moz-border-radius-left: 8px;
    -webkit-border-left-radius: 8px;
  }

---

Extend

extend和mixin相較之下比較單純，但能夠有效省下CSS中重複的程式碼段落，例如：

  .special {
    background: #ff0000;
    color: #ffffff;
    border: #aa0000 2px solid;
  }
 
  .special-btn {
    @extend .special;
    cursor: pointer;
  }

這麼一來生成CSS的時候，就會把有extend的部分集中在一起：

 .special, .special-btn {
    background: #ff0000;
    color: #ffffff;
    border: #aa0000 2px solid;
  }
 
  .special-btn {
    cursor: pointer;
  }

---

@import

當網站規模較大時，CSS也容易變得複雜。@import讓我們可以把Scss的內容拆成不同的檔案再import進來用，整理起來也比較方便。
例如前面提到過的mixin，我習慣把很多個mixin要使用的段落寫在同一個檔案中，並存成_mixin.scss，之後才在主要的Scss檔案中寫「@import "mixin";」把它載入進來，這樣不只是撰寫時可以直接@include想取用的mixin段落，還能很方便的把同一份_mixin.scss複製到別的專案使用，不必重寫一份！需要注意的是因為compass.app會把sass資料夾中的.scss轉換成.css檔案，所以存檔供@import使用時記得檔名最前面要用底線「_」開頭喔！

還有很多強大的東西..

看完上面的一大堆後相信大家都能體會到Sass的強大，不過它真的還有更多好用的東西...下面只列出兩個我特別想提的：

• 加減乘除

  既然都這麼強大了，可以加減乘除求餘數應該是理所當然的吧。總之一樣是使用「+」、「-」、「*」、「/」、「%」就可以了，超級適合懶人！再也不用邊切版邊按計算機！

• 顏色變換

  Sass有超多方便調整顏色的function可以用！譬如說「invert(blue)」就可以得到藍色的相反色黃色；用「mix(#ff0000,#fff600)」可以得到紅色(#ff0000)和黃色(#fff600)混合出來的橘色(#ff7b00)；用「lighten(#ff0000,10%)」可以得到變亮百分之十的紅色「#ff3333」，相反的還有darken可以用。當然除了這些之外還有很多很多根本寫不完，會用的話連調顏色都不用再傷腦筋，真的超方便！

 

以上。大概就講解到這裡，有興趣鑽研的人可以自己再去看看官網的說明和這份超棒的投影片，相信可以學到不少。下一篇會介紹比已經很強大的Sass還要更強大的Compass。

然後不能免俗的還是要繼續推薦購買compass.app，它真的是價格合理、設定簡易，絕對是在windows環境下快樂寫Sass和compass的最佳選擇！