scss學習

魚是什麼魚發表於2017-12-12
CSS

1. SASS和SCSS的區別

  • 副檔名不同：“.sass”和“.scss”；
  • SASS是以嚴格縮排式語法規則來書寫的，不帶大括號和分號；而SCSS的語法和CSS書寫語法類似。

2. 安裝

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);
　　}

相關文章