變量Variable
變量是在樣式單中重用信息的一種方式。 你可以存儲顏色,字體設置 或者其它的你要重用的CSS值。 Sass使用$
標記變量, 這裏是一個例子:
1 2 3 4 5 6 7
|
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
|
當處理Sass時, 它得到變量$font-stack
和$primary-color
的值, 並用它們替換CSS中的變量爲正常的CSS的值。 當處理已命名的顏色時這個功能相當強大,可以讓CSS保持一致。
1 2 3 4
|
body { font: 100% Helvetica, sans-serif; color: #333; }
|
嵌套Nesting
當寫HTML代碼時, 你可能注意到它有一個清晰的嵌套和可視化的繼承關係(意者按:DOM)。 而CSS缺乏這個功能。
Sass可以讓你嵌套你的CSS選擇器(selector), 就像HTML的可視化繼承關係一樣。注意過度的嵌套也可能導致過度設計的CSS。 這會很難維護,通常被認爲的差的實踐。
考慮到這一點, 這裏是一個站點導航的典型的樣式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
|
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
|
這裏的ul
,li
,a
選擇器都嵌套在nav
中。 這是一個極佳的組織CSS的方式, 讓CSS變的更可讀。 當你產生CSS時你會得到:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
|
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
|
分部文件Partial
你可以創建部分的Sass文件,這些文件包含CSS的小的可以插入到其它Sass文件的片段。這又是一個極佳的模版化CSS的方式, 可以更好的維護CSS。一個分部文件的名字以下劃線開頭比如_partial.scss. 下劃線讓Sass知道這個文件是一個分部文件,不會爲它單獨產生一個CSS文件。可以使用@import導入分部文件.
導入Import
CSS有一個導入(import)選項。 它可以讓你的CSS文件分割成一些小的更易維護的文件。 唯一的缺點是你需要在CSS使用 @import
, 它會產生另外一個HTTP請求 (?)。 Sass在構建頂層CSS時不會請求新的HTTP request,而是得到你要引入的文件並把它插入到當前文件中。所以你只會得到唯一一個CSS文件.
來看兩個文件 _reset.scss
and base.scss
. 我們會導入 _reset.scss
到 base.scss
.
1 2 3 4 5 6 7 8 9
|
// _reset.scss html, body, ul, ol { margin: 0; padding: 0; }
|
1 2 3 4 5 6 7 8
|
/* base.scss */ @import 'reset'; body { font-size: 100% Helvetica, sans-serif; background-color: #efefef; }
|
注意在文件base.scss
中你使用的是@import 'reset'
; 當你導入一個文件時你不必包含後綴 .scss
. Sass足夠聰明,會正確工作. 當產生CSS文件後,你會得到:
1 2 3 4 5 6 7 8 9
|
html, body, ul, ol { margin: 0; padding: 0; } body { background-color: #efefef; font-size: 100% Helvetica, sans-serif; }
|
Mixins
有些東西在CSS中編寫起來相當乏味, 尤其是當許多供應商的前綴 ( vendor prefixes, 指-webkit-XXXX等)存在時。 mixin可以爲CSS聲明分組, 可以在站點中重用。你甚至可以傳遞給它一些參數, 這相當靈活. mixin一個很好的應用就是處理瀏覽器變種的前綴。 請看 border-radius
的例子.
1 2 3 4 5 6 7 8
|
@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, 並賦予一個名字. 這裏我們命名這個mixin 爲border-radius
. 我們在圓括號裏使用變量作爲參數, 這樣我們可以傳入一個我們想要的值。 當你創建了你的mixin, 你可以用@include
使用它作爲CSS聲明。 @include緊跟着 mixin的名字. 當生成CSS後, 生成的CSS會是這樣:
1 2 3 4 5 6
|
.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
|
擴展/繼承Extend/Inheritance
這是Sass最有用的特性之一。使用 @extend
可以讓一個selector共享另外一個selector的CSS屬性。 它可以讓你的Sass遵循DRY原則(Don’t repeat yourself). 下面的例子中我們會建立一個系列消息類如 error, warning 和 success.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
.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; }
|
上面的代碼允許你獲取.message
的CSS屬性並將它們應用到.success
, .error
和 .warning
上. 魔法在生成的CSS上呈現, 它幫助你避免在一個HTML元素上寫多個類名。 結果看起來就像:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }
|
Operator
在CSS中的數學運算很有幫助. Sass可以使用標準的數學運算 +
, -
, *
, /
, and %
. 這個例子我們會計算aside
&article
的寬度.
1 2 3 4 5 6 7 8 9 10 11
|
.container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }
|
我們已經創建了一個簡單的960px流式表格. Sass運算符可以使用像素值並輕易地把它轉爲百分比的表示。產生的CSS如下:
1 2 3 4 5 6 7 8 9 10 11 12 13
|
.container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complimentary"] { float: right; width: 31.25%; }
|