Sass 整理一些常用的方法

Sass 整理

每次都要找實在是有點浪費時間,不如乾脆一次整理完。

If … Else …

1
2
3
4
5
6
7
8
9
10
$boolean: true !default;

div {
@if( $boolean ){
display: block;
}
@else {
display: none;
}
}

For

1
2
3
4
5
@for $i from 1 through 5 {
.wd-#{$i} {
width: #{$i * 20%};
}
}

List and Each

1
2
3
4
5
6
7
8
$list: adam john wynn mason kuroir;

@each $author in $list {
.photo-#{$author} {
background: image-url("avatars/#{$author}.png") no-repeat;
}
}
`

nth List

1
2
3
4
5
6
7
8
9
10
11
12
$list: (
one black,
two black + 20,
three black + 40,
four black + 60
);

@each $p in $list {
.#{ nth($p, 1) } {
background: #{ nth($p, 2) };
}
}

Map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$icons: (
1: #07171f,
2: #2c678d,
3: #4ab9aa,
4: #a2e27a,
5: #cfff76,
6: #fbffa0
);

@each $index, $color in $icons {
.bg-#{$index} {
background-color: $color;
}
}

.test {
background-color: map-get($icons, 1);
}
1
2
3
4
5
6
7
.bg-1 { background-color: #07171f; }
.bg-2 { background-color: #2c678d; }
.bg-3 { background-color: #4ab9aa; }
.bg-4 { background-color: #a2e27a; }
.bg-5 { background-color: #cfff76; }
.bg-6 { background-color: #fbffa0; }
.test { background-color: #07171f; }

Mixin

混入 class 中,可以傳入參數。

1
2
3
4
5
6
7
@mixin width-add($a, $b: 20px){
width: $a + $b;
}

.my-module {
@include width-add(10px);
}

Function

回傳特定值,有複雜的計算時。

1
2
3
4
5
6
7
@function width-add($a, $b: 20px){
@return $a + $b;
}

.my-module {
width: width-add(10px);
}

Extend

合併 class 時使用,不可傳入參數。

1
2
3
4
5
6
7
8
9
10
11
12
13
%all-h1 {
font-size: 20px;
}

.header h1 {
@extend %all-h1;
color: #000;
}

.content h1 {
@extend %all-h1;
color: green;
}