CSS 強化裝備！Sass 安裝與使用

時間 2019-11-05

標籤 css 強化裝備 sass 安裝使用欄目 CSS 简体版

原文原文鏈接

Sass 是什麼？

Sass 是 Syntactically Awesome Style Sheets 的縮寫，它是CSS的一個開發工具，提供了不少便利和簡單的語法，讓CSS看起來更像是一門語言，這種特性也被稱爲「CSS預編譯」。它的主要涉及思想是讓咱們能夠按照編程的思路編寫本身的樣式，而後經過「編譯器」生成咱們所須要的CSS文件。css

官網html

Sass 和 SCSS 有什麼區別？

Sass 和 Scss 實際上是同一種東西，咱們平時都稱之爲 Sass，二者不一樣之處有如下兩點：node

文件擴展名不一樣。
Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名；程序員
語法書寫方式不一樣。
Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號「{}」和分號「；」，而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似。web

PS：本文只討論 SCSS。編程

SCSS 與 Sass 異同 - Sass 中文文檔gulp

爲何選擇 Sass？

「LESS 要靠 JavaScript 解析，我不喜歡這種作法。另外，LESS 的變量用 @ 表示，我也不太習慣。」 by 阮一峯segmentfault

SASS用法指南 - 阮一峯sass

Sass、LESS 和 Stylus 簡單對比ruby

三者都是開源項目；
Sass 誕生是最先也是最成熟的 CSS 預處理器，有 Ruby 社區和 Compass 支持；Stylus 是早期服務器 NodeJS 項目，在該社區獲得必定支持者；Less 出現於2009年，支持者遠超遠於 Ruby 和NodeJS社區；
Sass 和 LESS 語法較爲嚴謹、嚴密，而Stylus語法相對散漫，其中 LESS 學習起來更快一些，由於他更像CSS的標準；
Sass 和 LESS 相互影響較大，其中 Sass 受 LESS 影響，已經進化到了全面兼容 CSS 的 SCSS；
Sass 和 LESS 都有第三方工具提供轉譯，特別是 Sass 和 Compass 是絕配；
Sass、LESS 和 Style 都具備變量、做用域、混合、嵌套、繼承、運算符、顏色函數、導入和註釋等基本特性，並且以「變量」、「混合」、「嵌套」、「繼承」和「顏色函數」成爲五大基本特性，各自特性實現功能基本形似，只是使用規則上有所不一樣；
Sass 和 Stylus 具備相似於語言處理的能力，好比說條件語句、循環語句，而 LESS 須要經過 When 等關鍵詞模擬這些功能，在這一方面略遜一籌。

CSS 預處理的缺點

我的感受CSS 預處理器語言那是程序員的玩具，想經過編程的方式跨界解決 CSS 的問題。能夠說 CSS 應該面臨的問題一個也少不了，只是增長了一個編譯過程而已，簡單來講 CSS 預處理器語言較 CSS 玩法變得更高級了，但同時下降了本身對最終代碼的控制力。更致命的是提升了門檻，首先是上手門檻，其次是維護門檻，再來是團隊總體水平和規範的門檻。這也形成了初學學習成本的昂貴。

CSS預處理器——Sass、LESS和Stylus實踐【未刪減版】 - W3CPlus - 2013-03-13

我選擇 Sass 的緣由：

Sass也是成熟的 CSS 預處理器之一，並且又有一個穩定，強大的團隊在維護；
Sass對於我來講參考的教程多；
Sass有一些成熟穩定的框架，特別是 Compass，新秀還有 Foundation 之類；
還有一個緣由是國外討論 Sass 的同行要多於 LESS。

出於這幾個緣由，我想我學習或者使用 Sass 更容易一些，碰到問題更有參考資料，更有朋友幫忙解決。

該使用 SASS 仍是 LESS？ - 大漠 - 知乎 - 2014-07-04

安裝

Sass 是 Ruby 語言寫的，可是二者的語法沒有關係。不懂 Ruby，照樣使用。不過必需要先安裝 Ruby，而後再安裝 Sass。

ruby 安裝

先從官網下載並安裝 ruby，在安裝的時候，請勾選 Add Ruby executables to your PATH 這個選項，添加環境變量，否則之後使用編譯軟件的時候會提示找不到 ruby 環境。

Downloads - 官網

sass 安裝

安裝完 ruby 以後，在開始菜單，找到剛纔安裝的 ruby，打開Start Command Prompt with Ruby

而後直接在命令行輸入：

gem install sass

按回車鍵確認，等待一段時間就會提示你 Sass 安裝成功（若是由於牆的緣由安裝失敗，請參考下面用淘寶 RubyGems 鏡像安裝 Sass）。

淘寶 RubyGems 鏡像安裝 Sass

因爲國內網絡緣由（你懂的），致使 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性鏈接失敗。
這時候咱們能夠經過source命令來配置源，先移除默認的https://rubygems.org源：

gem source --remove https://rubygems.org/

而後添加淘寶的源https://ruby.taobao.org/:

gem source -a https://ruby.taobao.org/

而後查看一下當前使用的源是哪一個，若是是淘寶的，則比表示能夠輸入 Sass 安裝命令gem install sass了。

最後使用版本查看命令確保安裝成功：

sass -v

Sass 安裝 - W3CPlus

編譯

SASS 文件就是普通的文本文件，裏面能夠直接使用 CSS 語法。文件後綴名是 .scss，意思爲 Sassy CSS。

新建一個 test.scss 文件，內容爲：

$blue : #1875e7;
div{
    color: $blue;
}

而後在命令行輸入下面命令，屏幕上便顯示 .scss 文件轉化的 css 代碼：

sass test.scss

若是要將顯示結果保存成文件，後面再跟一個 .css 文件名：

sass test.scss test.css

那麼就會默認在當前目錄下生成文件。

Sass 提供四個編譯風格的選項：

nested: 嵌套縮進的css代碼，它是默認值；
expanded: 沒有縮進的、擴展的css代碼；
compact: 簡潔格式的css代碼；
compressed：壓縮後的css代碼。

生產環境當中，通常使用最後一個選項。

sass --style compressed test.scss test.min.css

你還可讓 Sass 監聽某個文件或目錄，一旦源文件有變更，就自動生成編譯後的版本。

// 監聽文件
// input.scss : scss文件
// output.css : 編譯後的css文件
sass --watch input.scss:output.css

// 監聽目錄 
// sassFileDirectory : sass文件目錄
// cssFileDirectory : 編譯後的css文件目錄
sass --watch sassFileDirectory:cssFileDirectory

Sass 編譯 - W3CPlus

Sass 的官方網站還提供一個在線轉換器，方便嘗試運行各類栗子：

SassMeister | The Sass Playground！

基本語法

1.變量

Sass 中能夠定義變量，方便統一修改和維護。

//sass style
//-----------------------------------
$gray: #666;
body {
  background-color: $gray;
}

//css style
//-----------------------------------
body {
  background-color: #666; 
}

2.嵌套

Sass 能夠進行選擇器的嵌套，表示層級關係。

//sass style
//-----------------------------------
ul {    
    li {
        display: inline-block;
    }
}

//css style
//-----------------------------------
ul li {
  display: inline-block; 
}

3.導入

Sass 中如導入其它sass文件，最後編譯爲一個css文件，優於純css的@import。

//sass style
//-----------------------------------
// reset.scss
html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}

//sass style
//-----------------------------------
// test.scss
@import 'reset';
body {
    font-size: 100%;
    background-color: #efefef;
}

//css style
//-----------------------------------
html,
body,
ul,
ol {
  margin: 0;
  padding: 0; 
}
body {
  font-size: 100%;
  background-color: #efefef; 
}

4.mixin

Sass 中可用mixin定義一些代碼片斷，且可傳參數，方便往後根據需求調用。今後處理 CSS 3 的前綴兼容輕鬆便捷。

//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing: $sizing;
       -moz-box-sizing: $sizing;
           -box-sizing: $sizing;
}
.box-border {
    border: 1px solid #ccc;
    @include box-sizing(border-box);
}

//css style
//-----------------------------------
.box-border {
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
           -box-sizing: border-box; 
}

5.擴展/繼承

Sass 可經過 @extend 來實現代碼組合聲明，使代碼更加優越簡潔。

//sass style
//-----------------------------------
.bar-left {
    border: 1px solid #ccc;
}
.bar-right {
    @extend .bar-left;
    color: #999;
}

//css style
//-----------------------------------
.bar-left, .bar-right {
    border: 1px solid #ccc; 
}
.bar-right {
    color: #999; 
}

6.運算

Sass 可進行簡單的加減乘除運算等。

//sass style
//-----------------------------------
$defaultFontSize: 10px;
.msg {
    position: absolute;
    top: (800px/2);
    left: 200px + 200px;
    font-size: $defaultFontSize * 2;
}

//css style
//-----------------------------------
.msg {
    position: absolute;
    top: 400px;
    left: 400px;
    font-size: 20px; 
}

7.顏色

Sass 中集成了大量的顏色函數，讓變換顏色更加簡單。

//sass style
//-----------------------------------
$linkColor: #08c;
a {
    text-decoration: none;
    color: $linkColor;
    &:hover {
        color: darken($linkColor, 10%);
    }
}

//css style
//-----------------------------------
a {
    text-decoration: none;
    color: #08c; 
}
a:hover {
    color: #006699; 
}