iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

使用SASS(SCSS)建立自己的CSS Library系列 第 1

[Day 01] 前言、文章大綱

前言

Sass對現在前端來說已經是不可或缺的技術,不僅用起來順手,如果熟悉之後切版的速度將會加快非常多
這次的文章主要希望能讓大家知道如何利用Sass建立自己的CSS Library,不論是工具類的CSS Library,或是和我一樣常常在做客製化專案時,要為專案寫一套屬於這個專案的CSS Library,相信在這次的文章中都能夠有所收穫!

這次的文章會採用邊學邊做的方式,會在講解Sass的觀念時順便做出一套CSS Library
個人認為雖然會從頭教,但速度可能不太建議純新手閱讀,建議學過HTML和CSS還有寫過任意一門程式語言閱讀起來會比較輕鬆~~

文章大綱

[Day 01] 前言
[Day 02] 環境建置(一) - 安裝vs code、nodejs
[Day 03] 環境建置(二) - gulp、compiling SASS
[Day 04] Sass - 簡介
[Day 05] Sass - Variables
[Day 06] Sass - Partials
[Day 07] Sass - Project Structure
[Day 08] Sass - Nesting
[Day 09] Sass - Print
[Day 10] Sass - Values
[Day 11] Sass - Operators
[Day 12] Sass - 常用的內建Modules
[Day 13] Sass - Maps
[Day 14] Sass - Lists
[Day 15] Sass - Loop
[Day 16] Sass - Booleans
[Day 17] Sass - Parent Selector
[Day 18] Sass - Mixins
[Day 19] Sass - Functions
[Day 20] Sass - Using @extend
[Day 21] Sass - Media Query
[Day 22] Sass - Making Utilities
[Day 23] Sass - Making a Grid System
[Day 24] 來使用建立好的CSS Libray做一個網頁吧!
[Day 25] 縮減CSS檔案大小: Purging CSS
[Day 26] 客製化CSS Library
[Day 27] 擴充CSS Library(一): Alerts
[Day 28] 擴充CSS Library(二): Tables
[Day 29] 擴充CSS Library(三): Accorian
[Day 30] 總結


下一篇
[Day 02] 環境建置(一) - 安裝VS Code、NodeJS
系列文
使用SASS(SCSS)建立自己的CSS Library21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言