Sass入門

學習Sass（官網：Sass）之前需要了解什么是Sass,Sass全稱：Syntactically Awesome StyleSheets，中文的大概意思是“語法樣式表”。從字面意思來講，就是把css樣式增加了一些語法。其實其功能也是差不多的。css本身是有自身的語法，但是并沒有變量、條件判斷、循環、函數等編程語言的基本語法，Sass就是提供了css缺失的功能。一般將Sass等稱為“Css預處理器”。

“Css預處理器”：
    CSS 預處理器是一種語言用來為 CSS 增加一些編程的的特性，無需考慮瀏覽器的兼容
性問題，例如你可以在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些
基本技巧，可以讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等諸多好處

作為css預處理器，不僅僅只有Sass一種，還包括LESS(官網：LESS)、Stylus（官網：Stylus）,它們之間的異同這里不再贅述，如果感興趣的朋友可以查看這篇文章，本文主要介紹Sass。如果你對為什么選擇Sass有疑問，請查看視頻《How I use SASS》（自備梯子）

環境安裝

  • Sass是使用Ruby開發的，在使用之前需要電腦安裝Ruby環境(本文基于mac，其他系統請自行Google,Google請自備梯子)。
    詳細查看：教程0--教程3。地址：https://ruby-china.org/wiki/install_ruby_guide

  • 安裝Sass gem

    gem install sass

    查看安裝是否成功：
    sass -v 能夠輸出版本號，表示安裝成功。

預處理

  • 通過命令行運行sass

    sass input.scss output.css

    將input.scss 轉換為css文件

  • 監控Sass文件的變化，自動轉換為css文件

    1. 監控單個文件 sass input.scss output.css
    2. 監控目錄 sass --watch app/sass:public/stylesheets

  • 編譯風格：詳細查看編譯風格文檔

    1. nested：嵌套縮進的css代碼，它是默認值。
    2. expanded：沒有縮進的、擴展的css代碼。
    3. compact：簡潔格式的css代碼。
    4. compressed：壓縮后的css代碼。(生產環境使用)

    ex: sass --style compressed test.sass test.css

語法

  • 展現方式，有sass和scss兩種。其不同點在下面代碼中可以非常清晰的看到。

    sass樣式:

    $font-stack:    Helvetica, sans-serif
$primary-color: #333

body
    font: 100% $font-stack
    color: $primary-color

    scss樣式：

    $font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

    sass的樣式是Sass剛剛問世的時候的樣式，后來隨著發展增加了scss的樣式，目前兩種樣式Scss都是支持的。sass沒有花括號，與原生的css樣式相差較大，scss基本上是和css的代碼樣式是一樣的，更符合之前寫css代碼習慣。我個人建議使用第二種scss的方式。

  • 注釋

    Sass注釋包括三中注釋風格：//注釋、/* 注釋 */、/*! 注釋 */。下面分別介紹不同的注釋方式。

    1. //注釋：單行注釋，預處理后消失，只存在sass文件中。
    2. /* 注釋 */：標準css注釋，會保留到編譯后的文件中。
    3. /*! 注釋 */：常用于版權聲明，使用壓縮模式預處理后，依舊會保留此注釋。

  • 變量

    Scss中的變量定義使用$開頭，例如：$my-color: #333 需要調用的地方直接：body { color: $my-color }

    下面查看完整例子：

    $font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

    預處理后生成的代碼：

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

    變量調用還有另外一種方式：

    $left: left;

body{
    margin-#{$left}:10px;
}

    這種方式是將變量嵌套在字符串中，使用#{}。

  • 嵌套

    Sass 支持標簽屬性等嵌套。

    標簽嵌套，Sass代碼如下：

    nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

    預處理后的css代碼如下：

    nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

    屬性嵌套

    Sass代碼(切記不要講屬性color后面的:漏掉)：

p {
　　　border: {
　　　　　color: red;
　　　}
　　}
```
預處理后css代碼：

```css
p {
    border-color: red;
}
```
引用父類元素。使用符號`&`

    Sass代碼：

```scss
a {

&:hover { color: blue; }
}
```
預處理后的css代碼：

```css
a : hover {
    color: blue;
}
```

高級用法

  • 局部模板

    在Sass中，可以創建一個局部文件，然后在其他的文件中引入局部文件。局部文件的命名一般以_開頭，如_partial.scss。在另一文件中可以同過@import引入,這樣在瀏覽器看到css文件只有一個。

  • 導入局部文件

    導入局部文件的關鍵字是@import。其不僅僅可以import.scss文件，還可以import.css文件，當導入.css功能時，同css中@import "file.css"的功能一致。

    局部Sass文件：

    // _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

    導入局部文件：

    // base.scss

@import 'reset';

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

    最終生成的css文件：

    html, body, ul, ol {
  margin: 0;
  padding: 0;
}

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

  • Mixins（混合）

    Mixins定義方式：

    @mixin Mixins名稱（參數:參數值）{
/*公用樣式*/
}

    定義成為模塊后，需要通過@include進行調用mixin，調用代碼如下：

    selector {
    @includ Mixins名稱(參數值);
}

    下面來看一個例子：

    Sass 文件:

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

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

    預處理后的css文件：

    .box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

  • Extend/Inheritance(擴展或繼承)

    Sass中可以從一個選擇器，繼承另一個選擇器。其關鍵字是：@extend。

    下面看一個例子，可以直觀的展現繼承關系：

    Sass代碼：

    .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;
}

    上面例子中，.success、.error、.warning都通過@extend關鍵字繼承了.message選擇器。下面看一下生成的css代碼：

    .message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

  • 操作符

    在學習一門新的編程語言中基本上都會有介紹操作符的章節，但是css這門獨特的編程語言確沒有這種方式，但是通過Sass，可以讓我們編寫css程序的時候也能有操作符、條件循環語句、自定義函數等。下面將介紹操作符。

    在Sass中的操作符包括 +、-、*、/。具體不用介紹，大家應該都明白。下面我們直接來看一個例子：

    Sass代碼

    .container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

    預處理后的css代碼：

    .container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

    不僅僅上述的寬度可以通過操作符進行技術，css的顏色也可以通過技術得到一個新的顏色，例如 #777 + #888其最后的結果是white

  • 數據類型

    Sass支持7中主要的數據類型：

    1. numbers：數字類型 (e.g. 1.2, 13, 10px)

    2. strings：字符串類型，既可以是""號，也可以是''，還可以直接省略 (e.g. "foo", 'bar', baz)

    3. colors: 顏色類型 (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))

    4. booleans: 布爾類型 (e.g. true, false)

    5. nulls： 空類型 (e.g. null)

    6. lists：集合，可以通過空格或者逗號進行lists值得分隔 (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)

    7. maps ：鍵值對 (e.g. (key1: value1, key2: value2))

  • 條件語句

    條件語句無非就是if-else格式，下面介紹一下格式。

    定義方式：

    if方式，關鍵字：@if

    @if true {
    /* 樣式 */
}

    if-else,關鍵字：@if @else

    @if true {
    /* 樣式 */
} @esle{
    /* 樣式 */
}

  • 循環語句

    SASS支持for循環：

@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}
```
　　
也支持while循環：

```scss
    $i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}
```
each命令，作用與for類似：

```scss
@each $member in a, b, c, d {

.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}
```

  • 自定義函數

    Sass支持自定義函數。函數的定義和調用如下所示：

@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}
```

總結

Sass的基本用法，上文中都有介紹到，如果還有其它問題，或本文沒有介紹到的地方，請查看官方文檔。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 聲明變量 定義變量的語法： 在有些編程語言中（如，JavaScript）聲明變量都是使用關鍵詞“var”開頭，但是...
    Junting閱讀 1,486評論 0贊 6
  • 2015年10月20日 1.嵌套 Sass 中還提供了選擇器嵌套功能，但這也并不意味著你在 Sass 中的嵌套是無...
    a0d560da7818閱讀 626評論 0贊 1
  • 一，CSS 預處理器 CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一...
    馮傻大粗閱讀 471評論 0贊 0
  • 很詳細的sass入門指南，學習一下。原文sass入門指南css預處理器已經算不上一個新鮮的詞了，當前比較有代表性的...
    hzrWeber閱讀 1,047評論 0贊 18
  • 長歌九霄氣蓋世，烽煙盡處豈無痕。 將軍錦衣人未還，濁酒一樽飲春秋。 迎風刺骨萬馬行，泣血沉沙萬骨枯。 末敬君臣孝為...
    海貝閱讀 720評論 0贊 4