iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
1
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 13

[蛻變事實/D13] 設計師勇闖前端城-( SASS & SCSS 的@import 是什麼?)

CSS 它有先後順序,後面會蓋掉前面!

<link rel="stylesheet" href="style/style1.css">
<link rel="stylesheet" href="style/style2.css">

style1 排第一、styel2排第二
如果都有一個class「.box」命名設定,那後面的style2,內容的指定就會蓋掉
如果同一隻css,但有同樣的 class 命名,一樣後面的設定會蓋掉前面
(如下圖)

在HTML語法可以引入很多支 CSS(尤其是大型網站分的就更細些)如:

<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/base.css">
<link rel="stylesheet" href="style/page.css">
<link rel="stylesheet" href="style/style.css">

而在 SASS 也有類似這個設定!在這裡用的是 @import
@import 讓SASS有了模組化的概念
那前置作業就是將各單元的CSS切割出來import

如:

@import "variable";  //變數,重點提醒排序要在前面 
@import "reset";  // reset.css    
@import "base"; // 基本
@import "layout"; // 共同框架,第一層
@import "module"; //button,form,table 的設定
@import "pages/..."; //各頁面
@import "vendor"; // 統一放入別人的CSS
........

除了某些制定的命名外,依個人習慣做分類
但重點結構一定是**reset、Base、mixin/variable **先載入
後面的CSS才能讀到前面的設定來進行覆蓋樣式,否則會無法編譯或是排版錯誤。


上一篇
[蛻變事實/D12] 設計師勇闖前端城-( SASS & SCSS & CSS 三角關係)
下一篇
[蛻變事實/D14] 設計師勇闖前端城-( SASS & SCSS 這怕怕的"程式鬼影"在哪兒!-P1)
系列文
蛻變事實-UI設計師勇闖前端城35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言