iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0

大家好我是烏木白,今天要講 Sass 篇的 import,讓我們一起學習!

什麼是Import?

Sass 的import(匯入),他的用意就是在我們稍早提到的,可以把許多 Sass 檔案,全部彙整出一隻 Css 檔案。

試著把檔案 import 進去 all.scss

以下是我之前練習的作業

我建立了一個 _layout.scss 的檔案。
如果你要合併的檔案,一定要有 下底線 (_) 不然會出錯喔!!

這時候我們把我們的 all.scss 打開!

請大家注意第6行,我們引入的方式就是這樣。 請各位一定要注意 ; 分號
我第一次使用時一直出差錯,後來參考其他人的方式才發現!

CSS 拆開管理

因為在許多的專案裡面,你可能會遇到很多頁面,然後每個頁面都有固定的 layput ,如果你把他全部寫在同一個的 Css 檔案裡面,在後續的更新及維修,會找的很辛苦,所以使用 Scss 的原因就是要讓你管理 Css ,把每個不一樣的檔案分開來

例如一下這張圖

第1行~第3行 是我引入的套件及變數。

第6行~第8行 是我自己寫的分頁及基本的設定!

常見問題

  1. 千萬記得要加 ; 分號,不然會出錯。
  2. 一定要記得匯入時,需要注意先後順序,如果你在其他的 Scss 檔案有用變數或者是基本設定,那一定要注意順序,否則可能會出差錯喔!

上一篇
Day14 Sass 變數有趣的地方
下一篇
Day16 Sass Mixin
系列文
如何成為一名斜槓煉金術士,學習前端相關技能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言