SASS-基礎用法

發表於 | 分類於 | 0 comments

變數命名(前面加個 $ 字號)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//變數
$font-color: bule;
$font-m: 16px;
$font-l: $font-m * 1.2;
$font-s: $font-m * 0.8;

.box01 {
    color: $font-color;
    font-size: $font-l;
}

.box02 {
    color: $font-color;
    font-size: $font-s;
}

@import

常見的分類
1
2
3
@import mixin   //放置所有Sass全域變數與Mixin
@import reset   //reset.css
@import layout  //共同框架(如：表頭、表尾)

@mixin + @include

建立：
@mixin + 名稱 { 語法內容} ;

插入：
@include + 名稱 ;

建立
1
2
3
4
5
6
7
//圓角效果
@mixin circle($size,$bgcolor){
    border-radius: 50%;
    width: $size;
    height: $size;
    background-color: $bgcolor;
}// @mixin可搭配變數應用
插入
1
2
3
.circlebox{
    @include circle(100px,red)
}

@mixin + @content

各種載具斷點
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//iPad - 768px
@mixin pad {
    @media(max-width: 768px){
        @content;
    }
}
//iPad以下 - 767px
@mixin mobile {
    @media(max-width: 767px){
        @content;
    }
}
//iPhone 6 Plus - 414px (視專案族群)
@mixin i6plue {
    @media(max-width: 414px){
        @content;
    }
}
//iPhone 6 - 375px (視專案族群)
@mixin i6 {
    @media(max-width: 768px){
        @content;
    }
}
//iPhone 5、SE - 320px
@mixin i5 {
    @media(max-width: 320px){
        @content;
    }
}
使用方式
1
2
3
4
5
6
7
8
9
.header{
    width: 100px;
    height: 100px;

    //iPad - 768px
    @include pad(){
        height: auto;
    }
}

Sass顏色函數

常用函數
1
2
3
4
5
6
7
8
9
10
11
12
13
$bg-color: #ff0000;

.darken:hover {
  background: darken($bg-color, 20%); //將紅色調暗10%
}

.lighten:hover {
  background: lighten($bg-color, 20%); //將紅色調亮10%
}

.invert:hover {
  background: invert($bg-color); //返回一個反相色
}

範例

See the Pen Sass-顏色函數 by Kanboo (@Kanboo) on CodePen.

參考文章

30天掌握Sass語法
SassMe顏色函數