SASS教程sass超詳細教程

 

SASS安裝及使用（sass教程、詳細教程）

採用SASS開發CSS，能夠提升開發效率。

SASS創建在Ruby的基礎之上，因此得先安裝Ruby。

Ruby的安裝：

         安裝 rubyinstaller-2.3.0-x64.exe

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

 

SASS的安裝：

 

      

 

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

而後直接在命令行中輸入：

gem install sass

按回車鍵確認，等待一段時間就會提示你sass安裝成功，若是失敗，則換其餘方法安裝。

 

查看當前源

gem sources

 

刪除默認源

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

 

添加新源

gem sources -a http://grms.ruby-china.org/

 

安裝sass

gem install sass

         

安裝完成後就能夠使用了

 

 

Sass 有兩種語法。 第一種被稱爲 SCSS (Sassy CSS)，是一個 CSS3 語法的擴充版本，這份參考資料使用的就是此語法。 也就是說，全部符合 CSS3 語法的樣式表也都是具備相同語法意義的 SCSS 文件。 另外，SCSS 理解大多數 CSS hacks 以及瀏覽器專屬語法，例如IE 古老的 filter 語法。 這種語種語法的樣式表文件須要以 .scss 擴展名。

 

第二種比較老的語法成爲縮排語法（或者就稱爲 "Sass"）， 提供了一種更簡潔的 CSS 書寫方式。 它不使用花括號，而是經過縮排的方式來表達選擇符的嵌套層級，I 並且也不使用分號，而是用換行符來分隔屬性。 不少人認爲這種格式比 SCSS 更容易閱讀，書寫也更快速。 縮排語法具備 Sass 的全部特點功能， 雖然有些語法上稍有差別； 這些差別在{file:INDENTED_SYNTAX.md 所排語法參考手冊}中都有描述。 使用此種語法的樣式表文件須要以 .sass 做爲擴展名。

 

SASS的使用：

         創建一個.scss的文件

編寫相關代碼

 

進入該目錄

鍵入該命令

回車執行

最終的結果

SASS經常使用語法：

 

基本用法

 

1 變量

 

SASS容許使用變量，全部變量以$開頭。

 

    　　$blue : #1875e7;　

 

    　　div {

    　　　color : $blue;

    　　}

 

若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中。

 

    　　$side : left;

 

    　　.rounded {

    　　　　border-#{$side}-radius: 5px;

    　　}

 

2 計算功能

 

SASS容許在代碼中使用算式：

 

    　　body {

    　　　　margin: (14px/2);

    　　　　top: 50px + 100px;

    　　　　right: $var * 10%;

    　　}

 

3 嵌套

 

SASS容許選擇器嵌套。好比，下面的CSS代碼：

 

    　　div h1 {

    　　　　color : red;

    　　}

 

能夠寫成：

 

    　　div {

    　　　　hi {

    　　　　　　color:red;

    　　　　}

    　　}

 

屬性也能夠嵌套：

 

    　　p {

    　　　　border-color: red;

    　　}

 

能夠寫成：

 

    　　p {

    　　　　border: {

    　　　　　　color: red;

    　　　　}

    　　}

 

注意，border後面必須加上冒號。

 

4 註釋

 

SASS共有兩種註釋風格。

 

標準的CSS註釋 /* comment */ ，會保留到編譯後的文件。

 

單行註釋 // comment，只保留在SASS源文件中，編譯後被省略。

 

代碼的重用

 

1 繼承

 

SASS容許一個選擇器，繼承另外一個選擇器。好比，現有class1：

 

    　　.class1 {

    　　　　border: 1px solid #ddd;

    　　}

 

class2要繼承class1，就要使用@extend命令：

 

    　　.class2 {

    　　　　@extend .class1;

    　　　　font-size:120%;

    　　}

 

2 Mixin

 

Mixin有點像C語言的宏（macro），是能夠重用的代碼塊。

 

使用@mixin命令，定義一個代碼塊。

 

    　　@mixin left {

    　　　　float: left;

    　　　　margin-left: 10px;

    　　}

 

使用@include命令，調用這個mixin。

 

    　　div {

    　　　　@include left;

    　　}

 

mixin的強大之處，在於能夠指定參數和缺省值。

 

    　　@mixin left($value: 10px) {

    　　　　float: left;

    　　　　margin-right: $value;

    　　}

 

使用的時候，根據須要加入參數：

 

    　　div {

    　　　　@include left(20px);

    　　}

 

3 顏色函數

 

SASS提供了一些內置的顏色函數，以便生成系列顏色。

 

    　　lighten(#cc3, 10%) // #d6d65c

    　　darken(#cc3, 10%) // #a3a329

    　　grayscale(#cc3) // #808080

    　　complement(#cc3) // #33c

 

4 插入文件

 

@import命令，用來插入外部文件。

 

    　　@import("path/filename.scss");

 

若是插入的是.css文件，則等同於css的import命令。

 

    　　@import "foo.css";

 

高級用法

 

1 條件語句

 

@if能夠用來判斷：

 

    　　p {

    　　　　@if 1 + 1 == 2 { border: 1px solid; }

    　　　　@if 5 < 3 { border: 2px dotted; }

    　　}

 

配套的還有@else命令：

 

    　　@if lightness($color) > 30% {

    　　　　background-color: #000;

    　　} @else {

    　　　　background-color: #fff;

    　　}

 

2 循環語句

 

SASS支持for循環：

 

    　　@for $i from 1 to 10 {

    　　　　.border-#{$i} {

    　　　　　　border: #{$i}px solid blue;

    　　　　}

    　　}

 

也支持while循環：

 

    　　$i: 6;

 

    　　@while $i > 0 {

    　　　　.item-#{$i} { width: 2em * $i; }

    　　　　$i: $i - 2;

    　　}

 

each命令，做用與for相似：

 

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

    　　　　.#{$member} {

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

    　　　　}

    　　}

 

3 自定義函數

 

SASS容許用戶編寫本身的函數。

 

    　　@function double($n) {

    　　　　@return $n * 2;

    　　}

 

    　　#sidebar {

    　　　　width: double(5px);

    　　}

 

（完）