SCSS 筆記(2) - extend、mixin、function

發表於 | 分類於 | 閱讀次數:
| 469

ALEX線上直播課程(10/6)上半場

extend、mixin、function使用時機

  • extend 繼承 (管理樣式)
  • mixin 管理屬性
  • function 管理(計算)值

以上三種請都寫在你自己寫的樣式的前面！
Alex個人習慣編寫順序：

  1. 變數
  2. function
  3. extend
  4. mixin

@extend 繼承

使用時機：整包樣式都要一樣的時候，減少重複的行為，以大方向為主（管理樣式）
例：超連結全部要去除底線、float的clear等

簡易範例：

1
2
3
4
5
6
7
8
9
%aBlock{
  text-decoration: none;
}
.button{
  @extend %aBlock;
}
.big_button{
  @extend %aBlock;
}

編譯後：

1
2
3
.button, .big_button {
  text-decoration: none;
}

重點：

  • 所有繼承應該”都”要放在最上面(權重問題)
  • 命名為%開頭 對應 @extend

@mixin 管理屬性

使用時機：需要大量重複使用到的屬性。
例：「大量使用固定的width、height」
、line-height跟height、box-shadow(陰影)

簡易範例：

1
2
3
4
5
6
7
@mixin line($height:20px){
  height: $height ;
  line-height: $height;
}
div{
  @include line(20px);
}

編譯後：

1
2
3
4
div {
  height: 20px;
  line-height: 20px;
}

重點：

  • @minix 對應 @include
  • 盡量不要把所有屬性全部寫到mixin內

function 管理屬性

搭配變數和mixin使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$font: 8px 12px 16px 24px 30px;
$base-line: 10px;

@function line-height($index:1){
  $font-size: nth($font, $index);
  @return (floor($font-size / 10px) +1) * 10px;
}
@function line($count:1){
  @return $base-line * $count
}

@mixin font($index:1){
  font-size: nth($font, $index);
  line-height: line-height($index)
}

.myFont{
  @include font(4);
  margin: line(); //我想要一個單位的margin
}

css輸出

1
2
3
4
5
.myFont {
  font-size: 24px;
  line-height: 30px;
  margin: 10px;
}

import

在css內使用import載入樣式時,
實際上import的樣式會比原本的css晚載入

使用import和直接<link>引入request次數是一樣的。

若因為共用樣式因素想使用import建議直接在HTML中的<link>中按照順引入。

css內使用import = html中使用link

0%