scss學習

1. SASS和SCSS的區別

• 文件擴展名不一樣：「.sass」和「.scss」；
• SASS是以嚴格縮進式語法規則來書寫的，不帶大括號和分號；而SCSS的語法和CSS書寫語法相似。

2. 安裝

• 先安裝Ruby(http://rubyinstaller.org/down...
• 經過命令安裝sass: 打開命令終端，輸入：gem install sass

3. sass編譯

3.1 單文件編譯

sass <編譯的sass文件路徑>/xx.scss: <輸入的css路徑>/xx.css
sass input.scss:output.css

3.2 多文件編譯

sass src/sass/:dist/css/

上面的命令表示將項目中「sass」文件夾中全部「.scss」(「.sass」)文件編譯成「.css」文件，而且將這些 CSS 文件都放在項目中「css」文件夾中。

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

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

在編譯的時候帶上參數' --style expanded':

在生產環境中，通常使用最後一個

sass --style compressed test.sass test.css

3.4 watch監控sass文件或目錄

// watch a file
　sass --watch input.scss:output.css
　// watch a directory
　sass --watch app/sass:public/css

官方在線工具 https://www.sassmeister.com/

用法

1. 變量

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

普通變量聲明後在全局範圍內可以使用
默認變量在值的後面加上!default便可

$side: left;

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

$side: left;
.rouned {
    border-#{$side}-radius: 3px;
}

2. 加減乘除

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

body {

    margin:(14px/2);
    top: 50px + 100px;   // 變量或屬性都可以
    right: $var * 10%;
    left: 10px * 2px; // 報錯
    left: 10px * 2; // 正確
}

注意，sass除法較爲特殊.若是除式中沒有變量或者不是在一個數學表達式中（有加法減法等），就要將除式運算用小括號括起來，不然「/」不會被當作除號運算。

p {
  font: 10px/8px; // 純CSS，不是除法運算
  width: $width/2;  // 使用了變量，是除法運算
  width: round(1.5)/2;  // 使用了函數，是除法運算
  height: (500px/2); // 使用了圓括號，是除法運算
  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
}

3. 嵌套

3.1 選擇器嵌套

div h1 {
    color: red;
}



// 能夠寫成以下：
div {
    h1 {
        color: red;
    }
}

在嵌套的代碼塊中，可使用&引用父元素

a {
    &:hover {  
        color: red;
    }
}

3.2 屬性嵌套

如border-color、font系列等

p {
    border: {
        color: red;
    }
    
    font: {
        size: 12px;
        weight: 700;
    }
}

注意，border必須加上冒號：

4. 註釋

SASS共有兩種註釋風格。

標準的CSS註釋:

/* comment */ ，會保留到編譯後的文件。

單行註釋:

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

在/*後面加一個感嘆號，表示這是"重要註釋"。即便是壓縮模式編譯，也會保留這行註釋，一般能夠用於聲明版權信息。

/*!
    重要聲明
*/

5. 繼承 @extend

SASS容許一個選擇器，繼承另外一個選擇器，使用@extend命令。好比，現有class1：

.class1 {
    border: 1px solid #ddd;
}

.class2 {
　　@extend .class1;
　　font-size:120%;
　　}

注意：要繼承的不單單是類選擇器，能夠是id選擇器也能夠是標籤選擇器，也能夠是某個狀態，任何選擇器都能繼承。

此外，能夠用佔位符%構建只用來繼承的選擇器。
用佔位符%聲明的代碼，若是不被@extend調用就不會被編譯，也不會渲染到CSS的規則集中。

%br5 {
    border-radius: 5px;
}
// 使用@extend調用：
.btn {
    @extend %bt5;
}

// 編譯後
.btn {
    border-radius: 5px;
}

6. Mixin混合宏

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

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

@mixin left {
　　float: left;
　　margin-left: 10px;
}

其次，使用@include調用

div {
　　@include left;
}

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

@mixin left($value: 10px) {
　　float: left;
　　margin-right: $value;
　　}

7. 插入/引入外部文件

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

@import "path/filename.scss";

8. 條件語句

@if語句

@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

9. 循環

@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命令

@each $member in a, b, c, d {
　　.#{$member} {
　　　　background-image: url("/image/#{$member}.jpg");
　　}
}

10. 自定義函數

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