Sass基礎

smile_bestSun發表於2016-09-02

變數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%;
}



            




相關文章