變數

1
2
3
4
$text-color: #fff;
body {
    color: $text-color;
}

變數可作加減乘除

1
2
$font-m: 16px;
$font-l: $font-m * 1.2;

變換顏色

1
2
3
4
5
6
7
8
9
10
11
.box1 {
    background: $base-color;
}

.box2 {
    background: darken($base-color, 20%);
}

.box3 {
    background: lighten($base-color, 30%);
}

import

建立 _variable.scss，在 all.scss 檔案裡面寫入 @import "variable";

reset

將 reset 的 css 檔案，以 scss 格式儲存，並 import 到 all.scss，放在 variable 之後。

mixin

1
2
3
4
5
6
7
@mixin blueSize {
    color: blue
}

h1 {
    @include blueSize;
}
1
2
3
4
5
6
7
8
@mixin color($color) {
    color: $color;
    text-decoration: $color;
}

.box1 {
    @include color(#ff0000);
}

mixin + @content 達成 RWD

1
2
3
4
5
6
7
8
9
10
11
@mixin pad {
    @media(max-width: 768px) {
        @content
    }
}

.header {
    @include pad {
        font-size: 20px;
    }
}

OOCSS

  1. 結構與樣式分離
  2. 容器與內容分離