这篇文章会讲解如何将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里面!!
也因为有了Partials的功能,开发者可以非常自由地定义自己Sass的架构,并且将档案区分开来达到模组化的管理,这样未来在维护和扩充上就会减轻很多负担~
<<: 【没钱买ps,PyQt自己写】Day 4 - 重要的 Qt 程序逻辑观念,务必先有此观念後面才会懂自己在干嘛
前言: 这周被分配到报告MVC、MVP与MVVM三种专案架构的比较,尽管之前在课堂上听过老师提过三者...
Aloha!我是中秋节没有肉烤的少女人妻 Uerica!今年连假没什麽跟朋友相聚的机会,还收到一堆月...
今日题目 题目连结:94. Binary Tree Inorder Traversal 题目主题:S...
(因前几天有其他事情要处理因此断赛,不过在可能范围内还是会将内容补齐) 要撰写 AVR 程序码并编译...
让 Angular 元件显示在画面上 上一篇,我们建立了一个元件 page1。 接下来,我们就要把 ...