[Day 06] Sass - Partials

这篇文章会讲解如何将Sass分成多个档案模组化管理,并於编译时只会编译到同一个css档案内

首先,我们在专案的sass资料夹内先建立一个variables.scss档案,并且把上一篇文章(Day 5)的变数剪下贴进去:

// variables.scss

// colors
$primary: #0058E6;
$secondary: #00F26D;
$warning: #F5BD2D;

// spacing
$base-padding: 0.75rem;
$base-margin: 0.75rem;

// 随便写一个样式测试是否有编译
.d-block {
  display: block;
}

接下来在main.scss将variables.scss import进来

// main.scss

// import时可以不用写副档名
// 因为编译时是由上到下编译,所以一定要在使用前先import
@import 'variables';

h1 {
  color: $primary;
  margin: $base-margin;
}

a {
  color: $secondary;
}

button {
  color: white;
  background: $warning;
  padding: $base-padding;
  display: block;
}

网站跑起来後会发现结果和Day 5一样,表示我们已经成功将变数提到另外一个.scss档案!

但这时候会发现一个问题,你会发现css资料夹内多出一个variables.css,内容就会是variables.scss编译过的CSS
这不是我们想要的,因为这表示如果我有10个.scss档案,编译完不就会有10个.css档案?

因此为了让开发者能决定什麽时候要编译成独立的.css,什麽时候要合并成同一个.css,Sass有了Partials的功能,我们仅需要在档案名称最前面加上" _ ",则import的时候就会被合并成同一个.css档案!

所以我们来将刚刚的variables.scss改成_variables.scss,并将variable.css删除

最後会发现网站的结果一样不变,而且样式都合并到了main.css里面!!

https://ithelp.ithome.com.tw/upload/images/20210919/20141363IKyXypvbfy.png

也因为有了Partials的功能,开发者可以非常自由地定义自己Sass的架构,并且将档案区分开来达到模组化的管理,这样未来在维护和扩充上就会减轻很多负担~

所以下一篇就来规划这次Sass的架构吧!


<<:  【没钱买ps,PyQt自己写】Day 4 - 重要的 Qt 程序逻辑观念,务必先有此观念後面才会懂自己在干嘛

>>:  Day 17-制作购物车系统之MongoDB设定

API
杂谈    

[Cmoney 菁英软件工程师战斗营] IOS APP 菜鸟开发笔记(1)

前言: 这周被分配到报告MVC、MVP与MVVM三种专案架构的比较,尽管之前在课堂上听过老师提过三者...

【在厨房想30天的演算法】Day 04 来浅谈一下空间复杂度

Aloha!我是中秋节没有肉烤的少女人妻 Uerica!今年连假没什麽跟朋友相聚的机会,还收到一堆月...

Day 11:94. Binary Tree Inorder Traversal

今日题目 题目连结:94. Binary Tree Inorder Traversal 题目主题:S...

Day5 — 前导:使用工具介绍

(因前几天有其他事情要处理因此断赛,不过在可能范围内还是会将内容补齐) 要撰写 AVR 程序码并编译...

Day 12:想要快速产出元件及范本,就用 Angular CLI 吧!(二)

让 Angular 元件显示在画面上 上一篇,我们建立了一个元件 page1。 接下来,我们就要把 ...