iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

SASS 基礎初學三十天 系列

從零開始學 SASS!
隨著現代專案越來越大型,協作的風氣盛行,我們最獨樹一格的前端三兄弟,還只有 CSS 駐足不前嗎?錯!在這幾年內,CSS 也成了獨當一面的大人了,發展了預處理器,讓設計 property 的方法更有彈性。
下次你在前端刻板的時候,不妨來試試看 SASS 吧!

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文 團隊波皮辣椒那你會修電腦嗎仙姑狗
DAY 1

DAY 01 前言

前言 第一次參加鐵人賽,真是有點小緊張哎嘿,雖然自己平常也是有在寫一些技術文件,但是三十天連載這種大長篇還真是沒試過XD,在開賽之前朋友找我熱血報名,當時還沒想...

2021-09-16 ‧ 由 Tilda 分享
DAY 2

DAY 02 CSS 預處理器

預處理器是什麼? 透過不同的編譯方式,最後都會產生成 CSS 的樣式,在變成 CSS 前,這些預處理器的寫法可以提升加速我們的開發進度、維護性、及可讀性,讓 C...

2021-09-17 ‧ 由 Tilda 分享
DAY 3

DAY 03 SCSS ? SASS ?

SCSS 是什麼?跟 SASS 是什麼關係? 說到這兩個看起來是一樣的東西,但是每次教學文章又發現好像有點不一樣但是又常看到寫再一起不清不楚彼此糾纏不清的狀態⋯...

2021-09-18 ‧ 由 Tilda 分享
DAY 4

DAY 04 實作環境配置 - 1

建立專案 首先先在 GitHub 上建立起一個練習專案吧! 輸入好自己的專案資訊後,依照指令將 local 中建立的專案丟上去! 為了 demo 方便,這邊直...

2021-09-19 ‧ 由 Tilda 分享
DAY 5

DAY 05 實作環境配置 - 2

安裝套件 Visual Studio Code 上有很多方便編寫程式的擴充套件,能讓我們在使用上更加方便快速,本篇介紹的 sass 當然也有套件~ 在擴充套件中...

2021-09-20 ‧ 由 Tilda 分享
DAY 6

DAY 06 Variable

終於進入到介紹 SASS 特點的區塊啦~ 第一個要介紹的就是大名鼎鼎的 變數 Variable 的部分,應該也能算是 SASS 最常用的方法。 變數 Varia...

2021-09-21 ‧ 由 Tilda 分享
DAY 7

DAY 07 Mixins

混入 Mixins 當我們在編寫 css 時,常常會發現有要重複套用的地方,像是一個網站的主題樣式,假如說主色調是藍色,那當我們在設計字型、底色時,會用到這個藍...

2021-09-22 ‧ 由 Tilda 分享
DAY 8

DAY 08 Nesting

嵌套 Nesting 當你在編輯一個 html 檔案時,巢狀結構的架構可以讓你快速了解,每個區塊裡面的內容物是什麼,藉此去建構一個完整的網頁,但是在單純的 cs...

2021-09-23 ‧ 由 Tilda 分享
DAY 9

DAY 09 Extends, Inhreitance

共用與繼承 Extends, Inhreitance 官方宣稱最方便、有用的方法,但我覺得參數比較有用XD,可以把重複寫的同樣設定延伸到要套用的 class 上...

2021-09-24 ‧ 由 Tilda 分享
DAY 10

DAY 10 Partials, Modules

運用兩種做法,去衍生不同樣式的 css ! Partial Partial 是把 css 拆分的其中一個方法,他不會被正式引入到 css 中,透過 module...

2021-09-25 ‧ 由 Tilda 分享