SCSS初接觸

東方來客發表於2018-11-04
CSS

Syntactically Awesome Style Sheets,帥氣語法構成的樣式表。
我們採用了Parcel來學習scss，使用npm i -D parcel下載parcel，然後在我們的目錄下使用npx parcel index.html，parcel會幫我們安裝node-sass並開一個ServerServer running at http://localhost:1234。

<h1>Hello,world</h1>
/* 1.scss */
h1{
    color: cyan;
}
複製程式碼

開啟這個網址我們可以看到效果：

SCSS初接觸

  1. 此時我們更改scss程式碼使用巢狀選擇器為：
body{
    h1{
        color: cyan;
    }
}
複製程式碼

parcel會實時翻譯我們改寫的程式碼，其結果仍然可以正常顯示。
2. scss可以定義變數

$color: cyan;

body{
    h1{
        color: $color;
    }
}
複製程式碼

顏色仍然能正常顯示。

SCSS初接觸
3. mixin

$color: cyan;
@mixin color{
    color: $color;
}
body{
    h1{
        @include color;
    }
}
複製程式碼

效果如下：

SCSS初接觸
此外mixin還可以傳參:

$color: cyan;
@mixin color($val:red){
    color: $val;
}
body{
    h1{
        @include color($color)
    }
}
複製程式碼

如果我們呼叫mixin時不傳參則使用預設值red。
4. placeholder

$color:cyan;

%color{
  color: $color;
}

body{
  h1{
    @extend %color;
  }
}
複製程式碼

這種寫法會為我們增加並列的選擇器來省程式碼。

相關文章