iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

30天內快速學習SASS,並建立屬於自己的CSS Library

參賽天數 21 天 | 共 21 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day 01] 前言、文章大綱

前言 Sass對現在前端來說已經是不可或缺的技術,不僅用起來順手,如果熟悉之後切版的速度將會加快非常多 這次的文章主要希望能讓大家知道如何利用Sass建立自己的...

2021-09-14 ‧ 由 zhix6842 分享
DAY 2

[Day 02] 環境建置(一) - 安裝VS Code、NodeJS

Day 02 和 Day 03 我們會來將環境建置完畢,環境安裝完成後就可以開始使用SASS了! 我的電腦是Windows 10,但Mac安裝環境也是大同小異...

2021-09-15 ‧ 由 zhix6842 分享
DAY 3

[Day 03] 環境建置(二) - gulp、compiling SASS

今天要來安裝這次會用到的所有工具套件,並能順利將SASS編譯成CSS~ VS Code 套件 我們這次需要使用到Live Server,可以到VS Code的延...

2021-09-16 ‧ 由 zhix6842 分享
DAY 4

[Day 04] Sass - 簡介

這篇文章簡單介紹一下Sass~ Sass 是什麼 ? Sass是一種CSS預處理器語言(CSS preprocessor),可以讓開發者使用像是變數、函式、嵌套...

2021-09-17 ‧ 由 zhix6842 分享
DAY 5

[Day 05] Sass - Variables

Variables 在Sass中,開發者可以使用變數,例如可以將常用的顏色、寬度設定成變數,這樣未來如果顏色或寬度要改變時,只需要改掉變數的值,而不用像一般CS...

2021-09-18 ‧ 由 zhix6842 分享
DAY 6

[Day 06] Sass - Partials

這篇文章會講解如何將Sass分成多個檔案模組化管理,並於編譯時只會編譯到同一個css檔案內 首先,我們在專案的sass資料夾內先建立一個variables.sc...

2021-09-19 ‧ 由 zhix6842 分享
DAY 7

[Day 07] Sass - Project Structure

Project Structure 這篇文章我們來建立我們Sass專案的架構~ 一般Sass專案內都會有一個主要的.scss檔案,其用來負責將所有有用到的.sc...

2021-09-20 ‧ 由 zhix6842 分享
DAY 8

[Day 08] Sass - Nesting

Nest CSS with Sass 在Sass中,可以將CSS一層一層的包起來,不但簡單直覺能直接和HTML的結構做對應,也不用一層一層重複寫 舉例來說,正常...

2021-09-21 ‧ 由 zhix6842 分享
DAY 9

[Day 09] Sass - Print

Print 有寫過程式的人都知道,我們常常會在控制台輸出一些訊息用來DEBUG,測試看結果正不正確、程式是否有跑到這段,像是Javscript的 console...

2021-09-22 ‧ 由 zhix6842 分享
DAY 10

[Day 10] Sass - Values

Values 有寫過任何一門程式語言的應該都知道,對於每個變數的值來說都會有其對應的資料型態,而在Sass內也存在這種機制,今天就來介紹一下Sass中的資料型態...

2021-09-23 ‧ 由 zhix6842 分享