CategorySass

Sass 學習筆記(三) – Import 與 Mixins

Continue reading

Sass 學習筆記(二) – 變數

Sass 除了能讓我們寫巢狀結構外,還能夠定義變數,非常簡單,以下範例大家應該可以很快能理解 Sass 變數的用法!

// 不使用變數
.header a {
    color: blue;
}
.menu a {
    color: #666;
}
.nav a {
    color: blue;
}
.footer a{
    color: #666;
}

Continue reading

Sass 學習筆記(一) – 安裝與巢狀結構

官方網站:http://sass-lang.com/

Sass 是以 Ruby 所編寫的編譯器,也是一種 CSS 的擴展語法, Sass 編譯器能將 Sass 及 Scss 檔轉譯為 CSS 檔,就像 CoffeeScript 需要先轉譯成 JavaScript 一樣,瀏覽器看到你直接餵了 Sass 檔給它吃,它可是會嚇個半死呢!

前面提到,Sass 編譯器看得懂兩種語法: Sass 和 Scss , Sass 是較舊的語法, Scss 是較新的,而且 Scss 內可以使用 CSS 語法,也就是說將 CSS 的語法複製到 Scss 檔內是可以編譯的,但 Sass 是用縮排取代大括號,因此直接複製 CSS 到 Sass 檔內是會錯誤的,雖然 Sass 因為省略的大括號和分號,減少了打字的次數,不過 Scss 和 原本的 CSS 寫法比較相近,又是比較新的語法,所以以下和之後的內容都會以 Scss 語法為主喔!(實際上請依各位喜好選擇 Sass 或 Scss)

其實本來是要查一下 Webpack 的 Sass 相關設定,後來就想說乾脆學一下好了,雖然我是從前端開始學習,但美感不好的我 CSS 並沒有多熟悉,不過理解一種新的語言也是一種樂趣,而且光這次的主題:巢狀結構,就已經讓寫 CSS 更像寫程式了,如果你還是重複同樣的 Class Name 在編輯 CSS 檔,強烈建議抽空學習一下 Sass ,對常常在編寫 CSS 的開發者可是受用無窮的喔!

Continue reading