啟動方式

$main-color: red;

.container {
    color: $main-color;
}

產出 css

.container {
    color: red;
}

運算

scss

$header-height: 70px;

#header {
    height: $header-height;
}

.some {
    padding-top: $header-height + 70;
}

產出 css

#header {
    height: 70px;
}

.some {
    padding-top: 140px;
}

巢狀結構(Nesting)

scss

#header {
    background: yellow;
    .title {
        color: red;
    }
}

產出 css

#header {
    background: yellow;
}

#header .title {
    color: red;
}

匯入(import)

 _reset.scss

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

$header-height: 180px; 
$main-color: green;

scss

@import 'reset';

#header {
    background: $main-color;
    height: $header-height;
    .title {
        color: red;
    }
}

產出 css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#header {
  background: green;
  height: 180px;
}

#header .title {
  color: red;
}

tip

匯入的檔案檔名前面習慣用底線，@import 時不需要輸入底線與副檔名
_reset.scss ⇒ @import 'reset';

混合(mixin)

scss

@mixin container {
    width: 1140px;
    margin: 10px auto;
}

#header {
    color: red;
    @include container;
}

產出 css

#header, #header2 {
    color: red;
    height: 300px;
}

#header2 {
    background: yellow;
    color: blue;
}

tip

宣告 ⇒ @mixin
使用 ⇒ @include

擴展(extend)

scss

#header {
    color: red;
    height: 300px;
}

#header2 {
    @extend #header;
    background: yellow;
    color: blue;
}

產出 css

#header, #header2 {
    color: red;
    height: 300px;
}

#header2 {
    background: yellow;
    color: blue;
}

函數(function)

scss

@function calc-margin($value, $type: px) {
    @return $value * 10 + $type;
}

#header {
    background: red;
    margin: calc-margin(20);
}

#container {
    margin: calc-margin(10, em);
}

產出 css

#header {
    background: red;
    margin: 200px;
}

#container {
    margin: 100em;
}