[Sass]-Sass入門

初識Sass

SASS簡介

sass是一種css預處理器，用專門的編程語言，進行網頁樣式設計，而後再編譯成正常的CSS文件。Sass是CSS3的擴展，它增長了嵌套規則，變量，mixins，選擇器繼承等等。Sass生成格式良好的CSS，使樣式表更易於組織和維護。

.sass和.scss區別：

.sass最初是爲了配合haml而設計，全部有着和haml同樣的縮進風格，從第三代開始，保留縮進風格，徹底向下兼容普通的css代碼。推薦使用.scss

compass 是一個開源的css創做框架（一個技術類庫）。在sass基礎上封裝了一系列有用的模塊和模板，補充sass的功能

推薦連接： sass中文網 | sass入門 | sass用法指南-阮一峯

安裝

• window下安裝SASS首先須要安裝 (Ruby)[https://rubyinstaller.org/dow...
  安裝過程當中請注意勾選Add Ruby executables to your PATH添加到系統環境變量。
• 安裝完成後需測試安裝有沒有成功,運行CMD輸入ruby -v。如安裝成功會打印ruby版本號
• 更換gem源（使用淘寶的gem源https://ruby.taobao.org/）

1.刪除原gem源gem sources --remove https://rubygems.org/

2.添加國內淘寶源gem sources -a https://ruby.taobao.org/

3.打印是否替換成功gem sources -l

4.更換成功後打印以下:

*** CURRENT SOURCES ***
https://ruby.taobao.org/

• 安裝Sass和Compass

  //安裝以下(如mac安裝遇到權限問題需加 sudo gem install sass)
  gem install sass
  gem install compass

• sass經常使用更新、查看版本、sass命令幫助等命令：

  //更新sass
  gem update sass
  
  //查看sass版本
  sass -v
  
  //查看sass幫助
  sass -h

編譯sass

sass編譯有不少種方式，如命令行編譯模式、sublime插件SASS-Build、編譯軟件koala、前端自動化軟件codekit、Grunt打造前端自動化工做流grunt-sass、Gulp打造前端自動化工做流gulp-ruby-sass等。

//單文件轉換命令
sass input.scss output.css

//單文件監聽命令
sass --watch input.scss:output.css

//若是你有不少的sass文件的目錄，你也能夠告訴sass監聽整個目錄：
sass --watch app/sass:public/stylesheets

//編譯格式
sass --watch input.scss:output.css --style compact

//編譯添加調試map
sass --watch input.scss:output.css --sourcemap

//選擇編譯格式並添加調試map
sass --watch input.scss:output.css --style expanded --sourcemap

//開啓debug信息
sass --watch input.scss:output.css --debug-info

數據類型

• Number
• String
• List
• Map
• Color
• Boolean
• Null

// 數字類型
$n1: 1.2;
$n2: 12;
$n3: 12px;

// 字符串類型
$s1: content;
$s2: 'content';

// bool類型
$true: true;
$false: false;

// Null 類型
$null: null;

// color 類型
$c1: blue;
$c2: #000;
$c3: rbga(0,0,0,0.3);

.#{$s1}{
    @if $null == null {
        font-size: $n3
    }
}

變量

sass的變量必須是$開頭，後面緊跟變量名，而變量值和變量名之間就須要使用冒號(:)分隔開（就像CSS屬性設置同樣），若是值後面加上!default則表示默認值。

默認變量

sass的默認變量僅須要在值後面加上!default便可。

sass的默認變量通常是用來設置默認值，而後根據需求來覆蓋的，覆蓋的方式也很簡單，只須要在默認變量以前從新聲明下變量便可

多值變量

多值變量分爲list類型和map類型，簡單來講list類型有點像js中的數組，而map類型有點像js中的對象。

• list。list數據可經過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值
• map。map數據以key和value成對出現，其中value又能夠是list。格式爲：$map: (key1: value1, key2: value2, key3: value3);。可經過map-get($map,$key)取值。

全局變量

在{}內定義的變量，在{}外訪問不到。若是須要在全局訪問，須要在變量值後面加上!global即爲全局變量。

特殊變量

通常咱們定義的變量都爲屬性值，可直接使用，可是若是變量做爲屬性或在某些特殊狀況下等則必需要以#{$variables}形式使用。

未編譯樣式 Scss

body {
    $c_blue: blue;

    header {

        // 局部變量
        $c_red: red;

        // 全局變量
        $c_yellow: yellow !global;
        color: $c_red; 

        // 默認變量
        $fz: 14px;
        $fz: 12px !default;
        font-size: $fz;

        // 多值變量
        $padding: 2px 4px 6px 8px; // 相似數組
        padding: $padding;
        padding-left: nth($padding, 1); // 下標從1開始

        $maps: (color:red, fz: 13px); // 相似json
        background: map-get($maps, color);

        // 特殊變量
        $display: disp;
        
        .#{$display}{
            width: 10px;
            height: 10px;
        }
    }
    footer {
        color: $c_blue;
        color: $c_yellow;
        // color: $c_red; // Undefined variable: "$color".
    }
}

編譯後樣式 Css

body header {
  color: red;
  font-size: 14px;
  padding: 2px 4px 6px 8px;
  padding-left: 2px;
  background: red; }
  body header .disp {
    width: 10px;
    height: 10px; }
body footer {
  color: blue;
  color: yellow; }

/*# sourceMappingURL=test.css.map */

導入

sass的導入(@import)規則和CSS的有所不一樣，編譯時會將@import的scss文件合併進來只生成一個CSS文件。

原生css導入

若是在sass文件中導入css文件如@import 'reset.css'，那效果跟普通CSS導入樣式文件同樣，導入的css文件不會合併到編譯後的文件中，而是以@import方式存在。
如下爲原生css導入：

1. 被導入文件的名字以.css結尾
   @import '***.css'
2. 被導入文件的名字是一個URL地址
   @import 'http://***'
3. 被導入文件的名字是css的url{}值
   @import url(*.css)

Sass導入

全部的sass導入文件均可以忽略後綴名.scss。通常來講基礎的文件命名方法以_開頭，如_mixin.scss。這種文件在導入的時候能夠不寫下劃線，可寫成@import "mixin"。

嵌套

選擇器嵌套

選擇器嵌套指的是在一個選擇器中嵌套另外一個選擇器來實現繼承，從而加強了sass文件的結構性和可讀性。

& 父選擇器的標識符

&表示父元素選擇器，經常使用 &:hover

羣組選擇器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

子組合選擇器和同層組合選擇器 > +和~

1. 子組合選擇器>選擇一個元素的直接子元素。(只會選擇article下緊跟着的子元素中命中section選擇器的元素)

article > section { border: 1px solid #ccc }

1. 同層相鄰組合選擇器+選擇header元素後緊跟的元素

header + p { font-size: 1.1em }

1. 同層全體組合選擇器~，選擇全部跟在article後的同層article元素，無論它們之間隔了多少其餘元素

article ~ article { border-top: 1px dashed #ccc }

屬性的嵌套

屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。

border後面必須加上冒號。

@at-root 跳出嵌套

• @at-root
  用來跳出選擇器嵌套的。默認全部的嵌套，繼承全部上級選擇器，但有了這個就能夠跳出全部上級選擇器。
• @at-root (without: ...)和@at-root (with: ...)
  默認@at-root只會跳出選擇器嵌套，而不能跳出@media或@support，若是要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。這個語法的關鍵詞有四個：all（表示全部），rule（表示常規css），media（表示media），support（表示support，由於@support目前還沒法普遍使用，因此在此不表）。咱們默認的@at-root其實就是@at-root (without:rule)。

@at-root &組合

未編譯樣式 Scss

body {
    header {
        border: {
            color: red;
            radius: 5px;
        }

        a {
            text-align: center;

            &:hover {
                text-align: left;
            }
            @at-root .content {
                width: 100px;
            }
        }
    }
}
@media screen and (max-width:520px){
    @at-root (without:media rule){
        .content {
            height: 200px;
        }
    }
}
@at-root .text-info {
    color: red;

    @at-root nav &{
        color: blue;
    }
}

編譯後樣式 Css

body header {
  border-color: red;
  border-radius: 5px; }
  body header a {
    text-align: center; }
    body header a:hover {
      text-align: left; }
    .content {
      width: 100px; }

.content {
  height: 200px; }
.text-info {
  color: red; }
  nav .text-info {
    color: blue; }

繼承

選擇器繼承可讓選擇器繼承另外一個選擇器的全部樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞@extend，後面緊跟須要繼承的選擇器。

多繼承

一個選擇器中有多個繼承

鏈式繼承

.b 繼承.a, .c 繼承.b ...

侷限性

不支持包含選擇器(.a .b),相鄰兄弟選擇器(.a + .b)
a若是有:hover ,hover狀態也被繼承

佔位選擇器 %

若是不調用則不會有任何多餘的css文件，避免了之前在一些基礎的文件中預約義了不少基礎的樣式，而後實際應用中不論是否使用了@extend去繼承相應的樣式，都會解析出來全部的樣式。佔位選擇器以%標識定義，經過@extend調用。

未編譯樣式 Scss

.header {
    background: blue;
}
.footer {
    font-size: 12px;
}
.sidebar {
    width: 12px
}
.content {
    height: 13px
}
// 多繼承
.content-header {
    @extend .header;
    @extend .footer;
    @extend .sidebar, .content;
    color: red;
}

// 鏈式繼承
.a {
    width: 12px
}
.b {
    @extend .a;
    height: 13px;
}
.c {
    @extend .b;
    border: 2px;
}

// 佔位選擇器 %
%d {
    width: 12px
}

.e {
    @extend %d;
    height: 13px
}

編譯後樣式 Css

.header, .content-header {
  background: blue; }

.footer, .content-header {
  font-size: 12px; }

.sidebar, .content-header {
  width: 12px; }

.content, .content-header {
  height: 13px; }

.content-header {
  color: red; }

.a, .b, .c {
  width: 12px; }

.b, .c {
  height: 13px; }

.c {
  border: 2px; }

.e {
  width: 12px; }

.e {
  height: 13px; }

mixin

sass中使用@mixin聲明混合，能夠傳遞參數，參數名以$符號開始，多個參數以逗號分開，也能夠給參數設置默認值。聲明的@mixin經過@include來調用。
混合指令（Mixin）用於定義可重複使用的樣式，避免了使用無語意的 class，好比 .float-left。混合指令能夠包含全部的 CSS 規則，絕大部分 Sass 規則，甚至經過參數功能引入變量，輸出多樣化的樣式。

無參數mixin

//sass style
//-------------------------------
@mixin content {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include content;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

有參數mixin

@mixin cont($fz: 14px){
    font-size: $fz;
}
body {
    @include cont(12px) 
}

多個參數mixin

調用時可直接傳入值，如@include傳入參數的個數小於@mixin定義參數的個數，則按照順序表示，後面不足的使用默認值，如不足的沒有默認值則報錯。除此以外還能夠選擇性的傳入參數，使用參數名與值同時傳入。

@mixin cont($color: red,$fz: 14px){
    color: $color;
    font-size: $fz;
}
body {
    @include cont($fz: 12px) 
}

多組值參數mixin

若是一個參數能夠有多組值，如box-shadow、transition等，那麼參數則須要在變量後加三個點表示，如$shadow...

@mixin box-shadow($shadow...){
    -moz-box-shadow: $shadow;
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}
.shadow{
    @include box-shadow(0px 2px 3px #ccc, 4px 5px 6px #f2f)
}

@content

能夠用來解決css3的@media等帶來的問題。它可使@mixin接受一整塊樣式，接受的樣式從@content開始。

@mixin style-for-iphone {
    @media only screen and (min-device-width: 320px) and (max-device-width: 568px){
        @content;
    }
}
@include style-for-iphone{
    font-size: 12px;
}