0%

學習Sass基礎3 -- 拆分檔案的步驟

版權聲明

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

引用文章

Sass @import DAY34–皮傑先生

Sass 的 @import 功能,如何讓 scss 檔分門別類的管理

筆記

https://s3.us-west-2.amazonaws.com/secure.notion-static.com/414fe5d8-325e-47c2-a2aa-12d1e259bcd7/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220608T110319Z&X-Amz-Expires=86400&X-Amz-Signature=41c261e6b91f0abd8595a2db4269a0e0662cf8e1b709efa90f9c93d5617873b5&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22&x-id=GetObject

步驟一 all.scss

  • 使用 @import 功能來將本來的 all.scss 檔內的內容全部分拆成各自專屬的 scss 檔,
  • 然後再用 @import 的方式導入進 all.scss。
  • 通常我們的 all.scss 只會拿來 import 用
    1
    2
    3
    @import “variable”;
    @import “reset”;
    @import “main”;

步驟二 變數

  • 變數內容直接存入 “_variable.scss” 檔。
  • 變數命名可以參考:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $title-color: orange;
    $text-color: green;
    $background-color: pink;
    $base-color: yellow;
    $link-color: blue;
    $width: 960px;
    $spacer: 30px;
    $font-m: 16px;
    $font-l: $font-m * 1.5;
    $font-xl: $font-l * 1.5;
    $font-family-title: ”monospace”;
    $font-family-base: “Helverica, Ariel, sans-serif”;

步驟三 其餘我們撰寫的 scss 內容存入”_main.scss”