SCSS 新手入門

CSS 預處理器

CSS 預處理器是個能透過該預處理器語法產生 CSS 的程式。CSS 預處理器有很多選擇，不過大多數的 CSS 預處理器都會添加純 CSS 所沒有的功能，例如：mixin、巢狀選擇器、繼承選擇器等。這些功能會令 CSS 結構的可讀性更高、也更容易維護。

常見的 CSS 預處理器：

  • SASS

  • LESS

  • Stylus

  • PostCSS

什麼是 SASS ?

SASS (Syntactically Awesome Stylesheets) 是一種 CSS 的擴充，是為 CSS 的超集合（透過編譯會 compiled 成傳統 CSS，讓瀏覽器可以閱讀），增加了變數、巢狀、繼承、函式等功能。讓開發者可以撰寫簡潔、富語意、重複性佳、可維護性佳和可延展性佳的 CSS 程式碼。

  • Sass 的語法分為舊的 SASS (向 Haml取經，具備不使用大括弧格式、使用縮排，不能直接使用 CSS 語法、學習曲線較高等特性，檔案名稱為 .sass ) 和新的 SCSS (Sassy CSS、Sass 3，檔案名稱為 .scss)

  • 由於新的 SCSS 語法是 CSS3 的超集合，所以傳統的 CSS3 檔案就算直接複製過來也不會出錯，學習曲線相對較緩，因此我們將使用 SCSS 語法。

SCSS 語法介紹

變數與運算

可以用錢號 $ 來定義變數，用冒號 : 來指定變數的值，這與 CSS 定義屬性值很相似，在檔案中的其他地方就使用這些變數值。

幾個重點： - CSS 變數的命名通常是全小寫英文並用 - 連接號，例如 $second-color *** 變數在編譯後並不會出現在最後輸出的 CSS 檔案*** - 變數可以作加減乘除餘等運算 (+, -, *, /, %)，包括字串與顏色色碼也可以進行運算

//scss
$color-white: #fff;
$color-pink: #ee11ab;
$title-font: normal 24px/1.5 'Open Sans', sans-serif;

$primary-color: $color-pink;

a {
  background-color: $color-white;
  color: $color-pink;
}

//scss
$_num: 5px;

.container {
  color: $color-pink / 2;
  margin: $_num * 2 $_num;
}

幾個推薦的小技巧：

  1. 對於會套用到整個網站的每個顏色、字體建議都先定義成變數
  2. 不要使用像 red、blue 的英文字詞來指定顏色，而是要用 16 進位碼來定義，例如 red 應該寫成 #ff0000
  3. 在 CSS 類別中定義時，按照英文字元 A-Za-z 來排列其中的 CS S樣式定義

巢狀 Nesting

巢狀讓我們可以使用更直觀的寫法撰寫具有階層關係的 style，並且可以避免撰寫出重複的 css

// css
ul {
  list-style: none;
}

ul li {
  display: inline-block;
  padding: 15px;
}

ul li a {
  color: #444;
  font-size: 16px;
  text-decoration: none;
}

// scss
ul {
  list-style: none;

  li {
    display: inline-block;
    padding: 15px;

    a {
      color: #444;
      font-size: 16px;
      text-decoration: none;
    }
  }
}

第二種巢狀結構是沒有空格，接著在一起的CSS定義，這時在巢狀結構語法裡，就需要加入與符號(&)來定義，代表是黏在一起中間沒有空格的，例如以下的範例:

// css
.parent:hover{}
.parent.other-class{}

// scss
.parent{
  &:hover{}
  &.other-class{}
}

匯入 Impot

匯入其他的 SCSS 檔案，最後編譯時會一併包含進來編譯。要被匯入的通常檔案名稱前會加下底線 _ 作區分，這樣編譯工具在編譯時會略過這些檔案，而只會去編譯那些沒下底線 _ 的檔案，例如 _reset.scss。

例如 base.scss 中要匯入 _reset.scss，base.scss 的檔案內容會如下，要注意的是只需要寫 @import 'reset'，不用加副檔名或下底線 _，編譯程式會自動尋找對應的檔案:

@import 'reset';

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

混合 Mixin

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

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

這個mixin中的定義傳入值，是可以加上預設值的

@mixin label($text: 'Code', $background: $yellow, $color: rgba(black, 0.5)) {
  position: relative;
  &:before {
    background: $background;
    color: $color;
    content: $text;
    display: inline-block;
    font-size: .6rem;
  }
}

擴充 / 繼承 Extend

話不多說看程式碼就懂了 XDD

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

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

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

另外可以使用佔位符 % 來定義這個只被繼承之用的 CSS 類別

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

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

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

函式 Functions

SCSS 中也有 @function 可以定義自訂的函式，也有一些簡單的流程控制以及運算能力，例如 @return、@if、@for、@each

SCSS中也內建了許多[工具函式]](http://sass-lang.com/documentation/Sass/Script/Functions.html)

@function calculate-width ($col-span) {
  @return 100% / $col-span;
}

.span-two {
  width: calculate-width(2); // spans 2 columns, width = 50%
}

.span-three {
  width: calculate-width(3); // spans 3 columns, width = 33.3%
}

$a: false 
$b: true

@if $a {
    p {
        color: #fff000
    }
}

@if not ($b) {
	p {
        color: #fff000
    }
}

$radius: 5px !default;

.box-border{ 
	border:1px solid #ccc; 
	padding:10px; 
	@if $radius != 0{ 
		border-radius:$radius; 
	} 
}