版權聲明
本篇是將文章內容整理濃縮,作為學習之用,下文會一一附上原文連結,如有侵權,經告知之後會立即撤下
引用文章
Sass 的 @import 功能,如何讓 scss 檔分門別類的管理
筆記
步驟一 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”;