Sass的基本介紹:

1坤检、sass是css的一個(gè)預(yù)編譯處理器兴猩。增加了規(guī)則、變量早歇、混入倾芝、選擇器、繼承等等特性箭跳。它是用ruby語(yǔ)言編寫的晨另，集合了兩種語(yǔ)法：

• 縮排語(yǔ)法（或者就稱為 "Sass"）

提供了一種更簡(jiǎn)潔的CSS書(shū)寫方式。 它不使用花括號(hào){}谱姓，而是通過(guò)縮排的方式來(lái)表達(dá)選擇符的嵌套層級(jí)借尿，I而且也不使用分號(hào)，而是用換行符來(lái)分隔屬性屉来。類似于ruby語(yǔ)言路翻，文件名以.sass為后綴。

    body
        color:#fff;
        font-size:14px;
    

• 對(duì)css的擴(kuò)展

語(yǔ)法格式跟css完全一樣奶躯，用大括號(hào)將選擇器的屬性包裹起來(lái)帚桩。比較適合于前端工程師。

    body {
        color:#fff;
        font-size:14px;
    }

• Sass的安裝和基本命令[兩種方式]

• 標(biāo)準(zhǔn)的方式[方式一]

因?yàn)?code>sass是基于ruby語(yǔ)言編寫的嘹黔，所有安裝sass之前账嚎，得先安裝ruby語(yǔ)言±苈可以去官網(wǎng)http://rubyinstaller.org和http://rubyinstaller.org 下載郭蕉。

檢測(cè)是否安裝成功，在cmd命令行中輸入:

    ruby -v //檢測(cè)版本號(hào)

ruby的可以通過(guò)它的包管理器gem安裝程序喂江，更改RubyGems的訪問(wèn)地址召锈，默認(rèn)是放在亞馬遜的服務(wù)器上，國(guó)內(nèi)難訪問(wèn)得到获询。通過(guò)命令:

    // 移除默認(rèn)的地址
    gem sources -remove [https://rubygems.org/](https://rubygems.org/)
    
// 添加這個(gè)鏡像地址涨岁，如果https協(xié)議可以用拐袜，就用https,不行就用http
    gem sources -a[http://gems.ruby-china.org/](http://gems.ruby-china.org/)

//    查看地址
 gem sources -l
    

安裝sass：

 gem install sass                 //安裝sass
 
 sass -v                         //查看sass的版本
 
 gem update                     //更新所有的ruby程序包
 
 gem list                      //列出所有安裝的ruby程序包
 
 gem install sass --version=3.3.0     //安裝特定版本的程序包
 
 gem uninstall sass --version=3.3.0    //移除當(dāng)前程序包

SASS的一些常用命令：

 sass style.scss style.css           //將style.scss編譯為 style.css
sass --watch style.scss:style.css   //實(shí)時(shí)更新style.css
sass-convert style.css style.sass   //將.css文件轉(zhuǎn)換為.sass文件
sass-convert style.css style.scss   //將.css文件轉(zhuǎn)換為.scss文件   

• npm安裝方式

隨著 webpack模塊化打包工具的越來(lái)越流行，安裝sass梢薪，已經(jīng)沒(méi)必要像傳統(tǒng)方式那樣繁瑣了蹬铺。因?yàn)?webpack的loader加載器插件已經(jīng)有了對(duì)sass的支持，廢話不多說(shuō)秉撇。

首先得安裝nodejs 和 webpack甜攀，這里不多余講解webpack的用法了，只講述使用sass 那一部分琐馆。

通過(guò)npm命令安裝 sass依賴的包node-sass sass-loader css-loader style-loader ：

    npm i -D node-sass sass-loader css-loader

然后再 webpack.config.js 文件中配置支持sass 語(yǔ)法：

    // 省略了其他的配置項(xiàng)
    
    export.modules={
        ..... // 省略
        
        module:{
            rules:[
                {
                    test:/\.scss$/,
                    use:[
                        "style-loader",
                        "css-loader",
                        "sass-loader"
                    ]
                }
            ]
        }
    }

這樣任何.js 文件中通過(guò) require直接引用.scss文件了规阀，比如：

    // main.scss文件中
    body {
        font:{
            size:14px;
            weight:400;
        }
    }

然后可以直接在index.js 中引入：

    require "./main.scss"

當(dāng)編譯的時(shí)候，通過(guò)webpack 的sass-loader配置瘦麸，會(huì)自動(dòng)的編譯成瀏覽器能識(shí)別的css 樣式谁撼。

• sass語(yǔ)法：

  變量：

sass 可以像編程語(yǔ)言那樣，通過(guò)對(duì)一個(gè)樣式賦值給一個(gè)自定義的名字瞎暑。任何需要這個(gè)樣式的類名彤敛，就可以賦值這個(gè)名字。這就是變量的好處了赌。
sass中變量通常以$ 開(kāi)頭墨榄，后面可以接任何英文字母。一般都會(huì)把變量的聲明放在文件的頭部勿她，或者可以存放在一個(gè)單獨(dú)的文件保存所有的變量,通過(guò) @import 引入袄秩。例如：

$font_ss: 14px;  // 聲明了變量
.head {font-size:$font_ss};  //引用變量

編譯成CSS效果:

 ```
.head {font-size:14px;};
```

@import:

sass 的 @import跟css的 @import，本質(zhì)上完全不一樣逢并。css的 @import指令最好不用之剧，它有兩大弊端：

1、css 的 @import 必須放在代碼的最開(kāi)始砍聊，否則就不起作用背稼。

2、對(duì)性能不利玻蝌。我們假設(shè)是a文件引入b文件蟹肘，只有當(dāng)瀏覽器在解析到a中的@import 指令時(shí)，才會(huì)去下載 b 文件俯树，瀏覽器處于一個(gè)阻塞的過(guò)程帘腹，大大影響了頁(yè)面渲染的時(shí)間。

而sass的 @import指令许饿，在編譯階段將所有 @import 指令引入的文件烁试，合并到相應(yīng)的css文件中偿洁，而且@import指令可以用在文檔的任何地方麻诀。默認(rèn)sass的@import相對(duì)于宿主文件尋路。被引入的文件不需要添加后綴名.scss/.sass促绵，

例如,需要引入 name.scss 文件，只需要寫成：

    @import  "name"

而且對(duì)于被引入的文件，通常以"_"開(kāi)頭的文件，引入時(shí)可以省略"_"爆惧，例如："_versital.scss" 文件狸页，引入時(shí)：

@import "versital"

sass的選擇器：

• 嵌套選擇器：

直接上實(shí)例代碼锨能，在.scss文件中

.class {
     margin：0; padding:0;
    .class-child {
        width:40px;
        height:40px;
    }
}

編譯輸出的.css文件：

.class {
    margin:0;auto
}
.class .class-child{
    width:40px;
    height:40px;
}

• 偽類選擇器：

默認(rèn) css 中的偽類選擇器只需要在選擇器后面添加 :hover 即可，而在sass 中芍耘，需要使用一個(gè)特殊字符"&"址遇，表示的是直接父元素，實(shí)例代碼斋竞，在.scss文件中

a {
    &:hover {
        color:#f00;
    }
}

編譯輸出的.css文件：

a:hover{
    color:#f00
};

如果不加 "&"倔约，結(jié)果就變成了:

a  :hover {color:#f00};

就不是想要的效果了。

• 群組選擇器：

這個(gè)跟css使用方法完全一樣坝初，這里就不概述了浸剩。

sass不但可以對(duì)選擇器進(jìn)行嵌套，還可以對(duì)屬性進(jìn)行嵌套鳄袍，實(shí)例代碼绢要，在.scss文件中：

.a{
    font:{
        weight:700;
        size:14px;
    }
}

在.css文件中輸出的結(jié)果:

a {
    font-size:14px;
    font-weight:700;
}

sass 選擇器用法大致與css 相同，所以關(guān)鍵是要把css 的語(yǔ)法掌握好拗小，自然的,sass語(yǔ)法就不在話下了重罪！

• sass的函數(shù)：

sass的函數(shù)主要分兩大類：

• 1、通過(guò)function定義的函數(shù)哀九，這個(gè)使用的相對(duì)較少剿配。這里不多說(shuō)了！

• 2阅束、通過(guò)@mixin 創(chuàng)建函數(shù)呼胚，通過(guò)@include 調(diào)用函數(shù)。

• @mixin 函數(shù)：

@mixin 函數(shù)跟普通函數(shù)的使用方法差不多息裸。語(yǔ)法：

// 定義：
    @mixin name([params]){
        margin:0;
}
    

調(diào)用：

 .class{
    @include name([params])蝇更；
  }

輸出在.css文件中：

    .class {
        margin:0;
    }

參數(shù)：

==name:== 定義的函數(shù)的命名，

==params：== 定義時(shí)界牡，需要傳入的參數(shù)簿寂。可以省略的宿亡。比如：

@mixin name ($width){
    width:$width常遂；
}

調(diào)用時(shí)：

 .class{ 
    @include name(700px) 
   }

編譯輸出在.css文件中：

.class {
    width:700px;
}

如果既不想在調(diào)用的時(shí)候?qū)懮蠀?shù)，但又想有個(gè)默認(rèn)值挽荠，怎么辦克胳？可以這樣寫：

@mixin name (@width:200px;) {
    width:@width;
}
    

調(diào)用時(shí)不填參數(shù)：

.class {
    @include name;
}

編譯輸出的結(jié)果：

.class {
    width:200px;
}

如果想更改參數(shù)的默認(rèn)值平绩，可以傳一個(gè)新的數(shù)值：

.class1 {
    @include name (50%);
};

輸出的結(jié)果：

.class1{
    width:50%
};

• @extend:

在css中，當(dāng)一個(gè)class類漠另，想擁有另外一個(gè)class類的樣式屬性時(shí)捏雌，通常的做法在html中給它添加相同的類名，比如：

    <div class="alert">今天你學(xué)習(xí)了嗎笆搓？</div>
<div class="alert-sure">今天我學(xué)習(xí)了</div>

如果說(shuō) .alert-sure 的DIV中性湿，也想要 .alert 的 DIV 的樣式。傳統(tǒng)做法有兩種：

• 1满败、在css中肤频，將alert 類的屬性復(fù)制到一份到 .alert-sure 中

• 2、在 html 中算墨，給 .alert-sure 類再添加一個(gè) .alert 類而在 sass中宵荒，可以通過(guò) @extend 函數(shù)實(shí)現(xiàn)繼承。不在需要這種多余的代碼了净嘀。比如报咳，在.scss 文件中:

.alert{
    font-size:14px;
    width:50px;
}
    

給.alert-sure 類添加的樣式：

.alert-sure {
    @extend .alert；
    height:50px;
}

在.css文件中輸出的結(jié)果就是:

.alert挖藏，.alert-sure {
    font-size:14px;
    width:50px;
}
.alert-sure {
    height:50px;
}

這樣很好的降低了代碼的冗余暑刃。
但 @extend的繼承有一個(gè)需要注意的問(wèn)題。它的繼承會(huì)影響到后代選擇器中的元素樣式熬苍，所有使用繼承稍走，盡量避免使用css層疊。

• 1柴底、如果被繼承的類僅僅只是為了繼承婿脸，而對(duì)頁(yè)面的樣式無(wú)修飾作用，可以通過(guò)添加前綴"%"
  柄驻，那樣它就不會(huì)被渲染到.css文件中狐树！
  比如:

    %alert{
        width:20px;
        margin:0;
    }
    .alert-sure {
        @extend %alert;
    }

輸出的.css文件就只有 .alert-sure類：

.alert-sure {
    width:20px;
    margin:0;
}

而 %alert 類不會(huì)輸出到.css 文件中

• 2、另外鸿脓，@extend是不能繼承選擇器序列的：

.A .B {
            /***這樣的文件是無(wú)法繼承的***/
}

• @media query:

sass 中的 @media 跟CSS 區(qū)別：

sass中的 media query 可以內(nèi)嵌在css規(guī)則中抑钟，在生成CSS的時(shí)候，才會(huì)把media query 提到樣式的最高層級(jí)野哭。
這樣的好處在塔，避免了重復(fù)書(shū)寫選擇器。比如：

@mixin col-sm($width:50%){
    @media(min-width:768px)}{
        width:$width;
        float:left
    }
}

調(diào)用的時(shí)候：

 .webdemo-sec {
    @include col-sm();
  }

輸出在.css文件中的結(jié)果就是：

@media (min-width:768px ){
    .webdemo-sec {
        width:50%;
        float:left;
    }      
}

• @at-root指令：

在sass中拨黔，雖然它的嵌套規(guī)則確實(shí)很棒蛔溃，但是也有個(gè)致命的缺點(diǎn)，對(duì)性能的影響不好，但如果不使用嵌套呢贺待，代碼的可讀性又特別的差徽曲，所以sass中就有了一個(gè) @at-root 指令，

它的作用就是把它包裹的所有選擇器麸塞，提到樣式的最外層秃臣。
既保證了代碼的可讀性，又提高了性能哪工。比如奥此，在 .scss 中：

  .btn {
    width:50px;
    height:50px;
    @at-root {
        .btn-success{
            color:#f00;
            line-height:1;
        }
        .btn-info {
            color:#0f0;
            margin:0 auto;
        }
    }
  }  

輸出的.css文件：

    .btn {
        width:50px;
        height:50px;
    }
    .btn-success {
        color:#f00;
        line-height:1;
    }
    .btn-info　{
        color:#0f0;
        margin:0 auto;
    }

總結(jié)：

sass作為css 的一個(gè)強(qiáng)大的預(yù)處理器，可以有效的提高工作的效率正勒，減少代碼的冗余性得院。同時(shí)，也便利了代碼的整理維護(hù)和修改章贞。它的主要功能就是上面的這些。雖然簡(jiǎn)單非洲，但首先必須需要CSS鸭限！