By mikeZheng

Contents
  1. 1. SASS/SCSS
    1. 1.1. SASS/SCSS 介紹
      1. 1.1.1. SASS/SCSS簡介
      2. 1.1.2. CSS預處理器比較 Sass vs. LESS vs. Stylus
        1. 1.1.2.1. 1.Sass背景介紹
        2. 1.1.2.2. 2.LESS的背景介紹
        3. 1.1.2.3. 3.Stylus背景介紹
    2. 1.2. SSCSS 語法
      1. 1.2.1. 變數(Variables)
      2. 1.2.2. 巢狀結構(Nesting)
      3. 1.2.3. 載入(Import)
      4. 1.2.4. 自定樣式功能(Mixin)
      5. 1.2.5. 樣式繼承(Extend)
      6. 1.2.6. 變量運算(Operators)

SASS/SCSS

SASS/SCSS 介紹

這些日子在實驗室或在公司，花了很多時間學習及工作前端部分，其中調整網站前端切版時，總會希望自己現在手邊調的版型，未來可以模組化或是沿用，今天介紹的工具，就是可以用一個比較好維護的方式進行CSS的撰寫。

Sass

SASS/SCSS簡介

SASS 就是 Syntactically Awesome Stylesheets 語法優越的樣式表。
SCSS也是SASS的一種，SCSS可以直接當做CSS寫，而SASS則不用大括號。

CSS預處理器比較 Sass vs. LESS vs. Stylus

早些日子CSS的預處理器還有些取捨戰爭。

CSS前置處理器(CSS Preprocessor)，是一種構架於css之上的高階語言，可以通過腳本編譯生成CSS代碼，其目的是為了讓CSS開發者的工作更簡單有趣，當前已經進入了較為成熟的階段，基本上新的web開發專案大都已普遍使用。
現在最主要的選擇有：

1.Sass背景介紹

Sass是對CSS（層疊樣式表）的語法的一種擴充，誕生於2007年，最早也是最成熟的一款CSS前置處理器語言，它可以使用變數、常量、嵌套、混入、函數等功能，可以更有效有彈性的寫出CSS。Sass最後還是會編譯出合法的CSS讓流覽器使用，也就是說它本身的語法並不太容易讓流覽器識別，因為它不是標準的CSS格式，在它的語法內部可以使用動態變數等，所以它更像一種極簡單的動態語言。
其實現在的Sass已經有了兩套語法規則：一個依舊是用縮進作為分隔符號來區分代碼塊的；另一套規則和CSS一樣採用了大括弧（｛｝）作為分隔符號。後一種語法規則又名SCSS，在Sass3之後的版本都支援這種語法規則。
注：Sass官網地址：http://sass-lang.com

2.LESS的背景介紹

2009年開源的一個項目，受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。LESS提供了多種方式能平滑的將寫好的代碼轉化成標準的CSS代碼，在很多流行的框架和工具中已經能經常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。
根據WIKI百科上的介紹，其實LESS是Alexis Sellier受Sass的影響創建的一個開源項目。當時SASS採用了縮進作為分隔符號來區分代碼塊，而不是CSS中廣為使用的大括弧（｛｝）。為了讓CSS現有的用戶使用起來更佳方便，Alexis開發了LESS並提供了類似CSS的書寫功能。
注：LESS的官網：http://lesscss.org

3.Stylus背景介紹

Stylus，2010年產生，來自於Node.js社區，主要用來給Node項目進行CSS預處理支持，在此社區之內有一定支持者，在廣泛的意義上人氣還完全不如Sass和LESS。
Stylus被稱為是一種革命性的新語言，提供一個高效、動態、和使用表達方式來生成CSS，以供流覽器使用。Stylus同時支援縮進和CSS常規樣式書寫規則。
注：Stylus官網：http://learnboost.github.com/stylus

較為推崇的組合是，SASS+Compass+Twitter Bootstrap+bootstrap-sass，這一組合能夠獲得最好的底層語言SASS，最好的框架Compass，和Bootstrap提供的最強大的UI元件庫(被bootstrap-sass翻譯成SASS的風格)。
這邊提到發展引用於http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html

.scss .sass .less .styl
這些都是能提供前端工程師維護CSS的工具，更詳細的功能比較可以參考下面CSS PREprocessors Compare
https://csspre.com/compare/

### 為什麼採用Sass CSS預處理器? CSS(Cascading Style Sheet)為前端網頁撰寫，替HTML結構提供網頁外觀的風格樣式表。 透過讀取`.css`檔案可以控制HTML(XHTML)中個標籤的顯示樣式及屬性，可以更有效的控制web網站前端的外觀呈現。 就撰寫CSS本身而言，多數前端工程師都知道，它其實不是一種可以編譯、容易維護或是可以模組化的程式語言結構，你只能拿他做為網頁開發的樣式表。 因此對於前端工程師而言，對於他可以有效成現更好的網站外觀，但是下一個專案的開始又要想辦法把撰寫過的`.css`檔案中抓出你想要讓下一隻專案可以使用的部分，應該都對他又愛又恨。`.css`CSS程式碼只是一行行單純的描述，認真說寫起來難以組織及維護。

為了更方便進行前端網頁的開發，預處理器提供了以下需求:

  • 提供模組化已撰寫之樣式表
  • 容易載入及維護
  • 提供撰寫自訂樣式(類似函式語法模式)
  • 兼容CSS的語法
  • 縮短開發時間

而Sass提供了變數(Variables)、巢狀結構(Nesting)、載入(Import)、自定樣式功能(Mixin)、樣式繼承(Extend)及變量運算(Operators)…等等官網，提供前端工程師一個更好維護的開發環境

SSCSS 語法

前面講了這麼久，這邊開始介紹他容易維護而常使用的語法。

變數(Variables)

.scss語法

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

轉成的css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

透過變數的宣告，可很容易的將常用的語法定義進行維護動作，只要改變宣告的變數，底下撰寫使用到的語法都可以因此更動到。

巢狀結構(Nesting)

.scss語法

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

轉成的css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

用巢狀結構撰寫的好處，就是方便維護、容易看懂，用上面的例子可以清楚了解對於CSS的撰寫SCSS的巢狀結構帶來的好處。

載入(Import)

.scss語法

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

轉成的css

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

透過載入，可以將預先模組化的.scss程式碼拿來使用，此種方式可以讓前端工程師自己組織自己的武器，讓下一個專案開發時程更為壓縮。

自定樣式功能(Mixin)

.scss語法

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

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

轉成的css

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

上述寫法就像是自行宣告一個函式，在透過回傳參數傳遞進行更多專案作業一樣，透過自行宣告的瀏覽器兼容語法，讓程式碼更有彈性。

樣式繼承(Extend)

.scss語法

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

轉成的css

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

透過樣式繼承，縮短程式碼撰寫及可讀性，此種方式更容易撰寫基於某種樣式的延伸物件樣式。

變量運算(Operators)

.scss語法

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

轉成的css

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

相信對於工程師而言，運算的程式碼應該都是基本中的基本，但是如果在裡面加入變數，這樣整個SCSS code就更有調整空間。

這邊講了這麼多，是不是對於SCSS的撰寫有基本的了解了呢?
至於編譯工具的使用等到下一次才介紹。

Comments