/ Compass

[CSS note.] SASS - Say a sexy styling(刪除線)

SASS

全名是 Syntactically Awesome Stylesheets,當然不是我說得那個(媽媽有說,認真就輸了(揍飛),也許有人會說,踏碼的有一個 CSS 就已經很難搞了,現在來搞一個 SASS 來自作孽幹麼?或者是,這一切一定都是你們這些 programmer 在自 HIGH 用的啦一切都是阿共啊A陰謀啦~之類的。BUT!

人生最厲害的就是這個 BUT!(這梗你要用幾次啦!

俗話說得好,好的老師帶你上天堂,不好的老師讓你住套房,好的工具帶你上天堂,沒有工具讓你住病房!這也不是沒有道理的!這就是一個好工具,當然,好工具就一定會有一個前提!

請對 CSS 有一定的熟悉程度再來玩,這不是門檻,而是必備條件。

SASS 是一個語言,是一個將 CSS 給簡化,並加入可程式化的特性的一種語言。你可以不要那麼緊張的把他想成那眾多的程式語言。不諱言,你要說他是,那他就是,你要說他不是,那他就不是。至於他可以做到什麼事情?請看:

  • 可以用變數($)。
  • 可以做運算(+, -, *, /, %)。
  • 可以用函式(@mixin)。
  • 可以載入(@import)與擴展(@extend)。
  • 可以用判斷式(@if, @else if, @else)。
  • 可以用迴圈(@for, @while)。
安裝方法,在官方有寫。不過這是在 Ruby 的環境底下,所以請先準備好 Ruby 的環境喔(啾咪!)所以,裝好之後呢,我們就可以來寫 SASS 了。就這麼簡單?是的,就這麼簡單90 萬人都在用,就這麼簡單

首先,我們先來認識一下 SASS 到底是什麼東西。首先,他有兩種寫法,一種是 sass,另一種是 scss,這兩種有什麼差別呢?

/* 這種叫做 scss
$color: "#ff3333";
#h1 {
  background-color: #{$color};
}

/* 這種叫做 sass
$color: "#ff3333"
#h1
  background-color: #{$color}

我已經回不去了。

一旦開使用 SASS 之後,基本上應該就不會回去寫 CSS 了。底下來介紹一下一些基本用法:

/* 變數建立方式
$color: "#ff3333"
$width: 1000px
/* 函式建立方式(@mixin
@mixin box_radius($radius: 10px)
  -moz-box-radius: #{$radius}
  -webkit-box-radius: #{$radius}
  box-radius: #{$radius}
  /* 關聯式寫法(Nesting and Nesting properties)
h1 span
  margin: 0
  a
    color: #ff3333
    &:hover
      color: #ffff33
  >span
    color: #3333ff
    font:
      weight: bold
      size: 14px
      /* 引入與擴展(@import, @extend)
    外部的 sass 檔案前面必須前置底線(所以外部名稱實為:_import_css.sass)
    @import "import_css"
.extend_class
    margin: 0
    .my_class
  @extend .extend_class
  padding: 0
  /* 運算
$width: 1000px
.my_class
    width: $width - 300px
    /* 傳入值(Interpolation)
    我們傳入變數的方式有兩種,一種是傳入變數的值,一種是傳入變數。
    其中 #{ } 的寫法就是傳入值。
    倘若我們在這個例子的 .my_class1 使用 $color1,
    則產生出來的 css 的 color 就會變成 "#ff3333" 了。
    而倘若把 $color2 使用 # { } 傳入,則不影響所傳入的值。
    傳入值有什麼好處?請看 .my_class3 應該就很清楚。
    $color1: "#ff3333"
$color2: #3333ff
$color3: "white"
.my_class1
  color: #{$color1}
  .my_class2
  color: $color2
  .my_class3
  a.#{$color3}
    color: #{$color3}
    /* 迴圈
@for $i from 1 through 3
  .my_class_#{$i}
    width: 100px * $i
    /* 判斷式
$color: "white"
p
  @if $color == "white"
    color: white
  @else if $color == "blue"
    color: blue
  @else
    color: block

然後,還有一個超強的工具,叫做 Compass!關於這個東西 XDite 寫了一篇介紹!我也有在使用,一樣也是要 Ruby 環境的,而且他還有賣 GUI 的工具。不過我已經習慣用指令去做了,所以對我來說是沒差的。

Compass 也是超強!

好工具,不用嗎?

更多介紹:

Tsung's Blog, 於 Linux 安裝 與 SASS 簡易使用紀錄

小惡魔(wu-boy), 加速開發 CSS 工具: Sass