Ellie's Blog
0%

學習Sass基礎2 -- 語法

發表於 更新於

版權說明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

[FE201] 前端中階：那些前端會用到的工具們

  • 課程

[week 13] 前端工具之二 - CSS 預處理器、Babel

  • [FE201] 前端中階的總結筆記

Install Sass

  • 內文說明怎樣安裝

使用 SASS(SCSS)建立自己的 CSS Library :: 2021 iThome 鐵人賽

  • 講解 Sass 的觀念時順便做出一套 CSS Library

[CSS] Sass 入門教學-新手上路重點摘要(上) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

  • scss 的基礎寫法

參數與結構化 CSS

巢狀結構

1
2
3
4
5
6
7
h1 {
  color: red;
  p {
    color: goldenrod;
  }
}
// 注意scss- 結尾要有; 否則轉檔的時候會出錯
  • CSS 屬性也可以巢狀
    Untitled

變數

1
2
3
4
5
6
7
8
9
$main-color:red;
$second-color: yellow;

h1 {
  color: $main-color;
  p {
    color: $second-color;
  }
}

&符號接起父層

使用&表示重複前面的 class

1
2
3
4
5
6
7
h2{
  color: violet;
  &:hover{
    color: $main-color;
  }

}

模組化 CSS

mixin

  • 跟extend的區別?
    • 可以引入參數
    • 可以把常見的功能設定進去 mixin
  • 跟 @function 的區別?
    • 與  @mixin  的不同之處，在於  @function  只會回傳一個值，而  @mixin  是回傳一段 CSS 程式碼
  • 可帶入多個參數
    1
    2
    3
    4
    5
    6
    7
    @mixin fontsizeColor($size, $color) {
      font-size: 1rem * $size;
      color: $color;
    }
    h2 {
      @include fontsizeColor(1, $main-color);
    }

extend 繼承

  • 注意不加上’ . ‘ 而是用%來代替

    1
    2
    3
    4
    5
    6
    7
    8
    %title {
      padding: 20px;
      color: red;
    }

    h1 {
      @extend %title;
    }

  • 後面的設定可以覆蓋
    Untitled

Import

SCSS/CSS 學習筆記 - HackMD

  • 規劃檔案的結構

    1
    2
    3
    4
    5
    6
    (有底線代表不會被編譯成一支檔，合併使用)
    _variable.scss //專門放相關變數
    _mixin.scss //專門放相關mixin函式
    _mixinRwd.scss //rwd media
    _base.scss //全域設定SCSS
    _index.scss //專案頁面SCSS

  • 建立一支 main.scss

    1
    2
    3
    4
    5
    6
    7
    8
    @import "variable";
    @import "mixin";
    @import "mixinRwd";
    @import "base";

    //你也可以建立分類的資料夾
    @import "/page/index";
    @import "abstracts/variables", "abstracts/functions", "abstracts/mixins";

Functions

SASS @function

  • 可以得到一個計算的直

  • 然後再做引用

  • 與  @mixin  的不同之處，在於  @function  只會回傳一個值，而  @mixin  是回傳一段 CSS 程式碼

    Untitled

自動化 CSS

Loop

使用  @each  搭配 array

  • 以逗號表示  center, start, end
  • #{ } 引用列表的值
1
2
3
4
5
6
7
$direction-types: center, start, end

@each $type in $direction-types
  .flex-#{$type}
    display: flex
    justify-content: $type
    align-items: center

Untitled

使用  @each  搭配 map

  • 在括號以  參數:值  表示  (center: center, start: flex-start, end: flex-end)
1
2
3
4
5
6
7
8
9
10
11
12
$types: (
//$type : $value
  center: center,
  start: flex-start,
  end: flex-end,
);
@each $type, $value in $types {
  .P-#{$type} {
    display: inline;
    justify-self: $value;
  }
}

Untitled

for 迴圈

  • 使用時機：用於預先設定，或特效網站需產生密集大小值
1
2
3
4
5
6
7
8
9
10
11
@for $i from 0 through 5

//加一是因為要設定h6
    .h#{5 - $i + 1}
        font-size: 1 + 0.2rem * $i

@for $i from 1 through 6 {
  h#{$i} {
    font-size: 5rem - $i * 0.5rem;
  }
}

Untitled

Condition

可參考官方文件。