CSS 習作|Sass 入門學習資源,使用 VS Code 插件 Live Sass Compiler

更新於 發佈於 閱讀時間約 9 分鐘
raw-image

本篇將不同 Sass 學習資源彙整在此,作爲學習筆記,大多來自 w3schools 和六角學院,相關連結也一並記錄下來,以便可以隨時查看、更新。

👉🏻 文章上半段多為學習資源紀錄以及整理,下半段則紀錄使用 VS Code 插件來建立 Sass 環境,可依自己所需點擊目錄來閱讀文章。

Sass wiki 維基

Sass(英文全稱:Syntactically Awesome Stylesheets)是一個最初由Hampton Catlin 設計並由 Natalie Weizenbaum 開發的層疊樣式表語言。

Sass Basics

Sass 官方學習教程,可先閱讀以理解 Sass。

w3schools Sass Tutorial

  • Sass stands for Syntactically Awesome Stylesheet
  • Sass is an extension to CSS
  • Sass is a CSS pre-processor
  • Sass is completely compatible with all versions of CSS
  • Sass reduces repetition of CSS and therefore saves time
  • Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
  • Sass is free to download and use

Sass 中縮排是語法的一部分,SCSS是巢狀元語言。

六角學院:SCSS 與 Sass 格式差異

圖片來源:https://courses.hexschool.com/courses/670032/lectures/11949492

圖片來源:https://courses.hexschool.com/courses/670032/lectures/11949492

  1. SCSS 撰寫格式教學
  2. Sass 撰寫格式教學
  3. Sass 官方教學文章:Sass Syntax

六角學院:Sass 與 CSS 的不同之處

看完教程後,我繪製了瀏覽器與 Sass、CSS 之間的關係、運作流程:

Sass 需要轉譯為瀏覽器能讀懂的 CSS

Sass 需要轉譯為瀏覽器能讀懂的 CSS

  1. 如上圖,因瀏覽器看不懂 Sass,因此需要透過轉譯將 Sass 轉譯成 CSS
  2. 因此,開始撰寫 Sass 前,必須先安裝建立環境,使 Sass 能自動轉譯成 CSS
  3. 開始撰寫時都寫在 Sass 檔案裡面,不會寫在 CSS 檔裡面,因為 CSS 檔案已經是由 Sass 編譯出來的結果。

Sass 學習乾貨

下面針對不同主題,將整理來的學習資源以相關性放在一起(盡量 XD),大多來自 w3schools 和六角學院,相關連結也一並記錄下來。

1. Why Use Sass

  1. 減少重工負擔
  2. 變數篇 - 整合相同設定好幫手
  3. 運用 Sass 變數、管理樣式方法( 利用變數管理重複設定值 )
  4. 補充筆記:參考這裡學習 Sass 知識
  5. CSS 架構演化史 - 廖洧杰 | MOPCON 2020
  6. Sass教學手冊導讀 Learn-Sass-in-90-days
  7. sass-doc-zh (中文)

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.
Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

2. How Does Sass Work

A browser does not understand Sass code.
Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS. This process is called transpiling.(編譯、轉譯)
So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.

Transpiling is a term for taking a source code written in one language and transform/translate it into another language.

3. Sass File Type

Sass files has the ".scss" file extension.

4. Sass Comments

Sass supports standard CSS comments /* comment */, and in addition it supports inline comments // comment

sass 程式碼範例

sass 程式碼範例

5. System Requirements for Sass

  • Operating system - Sass is platform independent
  • Browser support - Sass works in Edge/IE (from IE 8), Firefox, Chrome, Safari, Opera
  • Programming language - Sass is based on Ruby


------- 我是分隔線 -------



安裝 Live Sass Compiler

本篇下半段,將進入使用 VS Code 插件來建立 Sass 環境。

Live Sass Compiler

Live Sass Compiler

安裝 Sass 有不同種方式,可參考 Sass 官方文件安裝教學

而在本篇筆記中,我則透過 VS Code 的插件來轉譯 Sass,這個插件為:Live Sass Compiler,或者可參閱以下安裝教學:

  1. VS CODE 編譯 Sass 教學
  2. 使用VSCode外掛自動編譯SASS/SCSS


安裝步驟:

  1. 開啟 VS Code。
  2. 在延伸模組上搜尋「Live Sass Compiler」。
  3. 點擊藍色按鈕安裝,即可完成。
安裝 Live Sass Compiler

安裝 Live Sass Compiler

安裝結束後,重新開啟 VS Code ,可以在視窗下方的「藍色狀態列」上看到「Watch Sass」,表示有成功安裝了,如下圖:

raw-image

如何使用 Live Sass Compiler 轉譯 Sass

我繪製了可能只有我自己看得懂的操作流程 XD

我繪製了可能只有我自己看得懂的操作流程 XD

安裝成功後,接續以下步驟來運用 Live Sass Compiler 轉譯 Sass:

  1. 在桌面上建立一個「project」專案資料夾,並在 「projects 資料夾內」建立一個「sass」資料夾,用來存放 scss 檔案。
  2. 接著,我們在 scss 資料夾內新增一個 all.scss 檔案。
  3. 開啟 all.scss 檔案,開始撰寫 Sass 語法。
  4. 點擊「藍色狀態列」上的「Watch Sass」開始轉譯寫在裡面的 Sass 語法。
  5. Live Sass Compiler 轉譯後自動新建了「css 資料夾」,裡面新增了已經轉譯的「all.css」、「all.css.map」兩個檔案,如下圖:
使用 Live Sass Compiler 轉譯 Sass 成 CSS

使用 Live Sass Compiler 轉譯 Sass 成 CSS

更改 Live Sass Compiler 存放 CSS 路徑

需特別注意的是,Live Sass Complier 預設情況下,編譯後不會自動新增資料夾,所以編譯後的檔案會和 all.scss 檔案放在同一個資料夾。
因此,如果希望另外產生資料夾來存放 all.css,需要手動更改存放路徑,操作流程如下:

  1. Code > 喜好設定 > 設定 > 使用者 > Live Sass Complier > 在 settings.json 內編輯
raw-image
  1. 點擊在 settings.json 內編輯後,看見以下程式碼:
raw-image
  1. 在 settings.json 內加入以下語法,加入後如下圖所示:
,
"liveSassCompile.settings.formats":[
{
"savePath": "/css"
}
]
raw-image

特別提醒 😮‍💨

剛開始建立完環境後撰寫 sass,隔天再度打開 VS Code,準備繼續寫 projests 的時候發現自己的東西大跑版、破版、樣式都沒有出現... 不斷確認自己哪裡出了問題,真的鬼打牆...就這樣一直卡了很久, 卡到快要瘋掉的地步,然後在一個熱到爆炸的時機點發現,好像是因為重新打開 VS Code 後,沒有再次按下「Watch Sass」,按下去後,東西都恢復正常了...

每次撰寫時要注意 Watch Sass 有沒有按!

也記錄一下其他可能會影響 Sass 無法正常運作的情況:

  1. 沒有開啟「Watch Sass」。
  2. 在 all.scss 檔案撰寫過程中,多打的文字或英文沒有記得註解,使得 sass 格式不正確。
  3. 使用 sass 的語法錯誤,例如少打 「{ 」或 多打「 ; 」,等等使語法錯誤。

結語

練習練習練習練習練習練習練習練習...
走到這個階段,花了不少時間來初步瞭解 Sass,相信日後可以漸漸運用 Sass 更多強大的地方...加油。

Practice make perfect, 我是正在自我習作中的 Draw,我們下篇見 🙇🏻


avatar-img
5會員
10內容數
從零開始,記錄網頁設計的學習過程。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
學習如何學習 的其他內容
養成 1px 都不差的切版練習,紀錄我的訓練過程。
本篇習作內容進入到 CSS 排版實作,一起瞭解 Flexbox,開始第一個網頁排版吧 💪🏻!
box-sizing 是 CSS 屬性的一種,它使我們可以改變盒模型的計算方式。
本篇習作加強自我對 CSS Box Model 的觀念,也是在實作練習中發現自己雖然看似理解了盒模型,但其實在應用上尚不熟悉,因此藉由筆記重新梳理和練習,將 CSS Box Model 的基礎觀念整理並釐清,一起來看看吧!
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
display 是一種 CSS 屬性,指定「 是否 / 如何 」顯示元素,而每一個 HTML element 都有預設的 display value,然而在預設的情況下,新手如我在剛接觸時常踩入深不見底的盲區, 一起來釐清學會辨識吧!
養成 1px 都不差的切版練習,紀錄我的訓練過程。
本篇習作內容進入到 CSS 排版實作,一起瞭解 Flexbox,開始第一個網頁排版吧 💪🏻!
box-sizing 是 CSS 屬性的一種,它使我們可以改變盒模型的計算方式。
本篇習作加強自我對 CSS Box Model 的觀念,也是在實作練習中發現自己雖然看似理解了盒模型,但其實在應用上尚不熟悉,因此藉由筆記重新梳理和練習,將 CSS Box Model 的基礎觀念整理並釐清,一起來看看吧!
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
display 是一種 CSS 屬性,指定「 是否 / 如何 」顯示元素,而每一個 HTML element 都有預設的 display value,然而在預設的情況下,新手如我在剛接觸時常踩入深不見底的盲區, 一起來釐清學會辨識吧!
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
在當今日新月異的數位時代,網站已經不僅僅是一個給人們提供資訊的平臺,更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS(Cascading Style Sheets)正是網站設計中的一個重要元素,扮演著關鍵的角色。
Thumbnail
這篇文章分享了作者對CSS Battle #151題目的解題方式,並強調了圖形解構的重要性。作者提到了基本的排版能力以及實際應用的弧度計算。透過這篇文章,讀者可以學習到CSS切版的技巧,同時也可以分享自己的作法,進行交流討論。
Thumbnail
不專業分享個人學習 SCSS 的筆記,知識來源為YTB講解,各路大神文章。
Thumbnail
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
這篇文章將解析CSS Battle第136題的解法,主要考驗基本CSS置中排版的能力,並提供了作者的解法與技術總結。透過互動學習,讓想要學習或練習基礎切版的朋友可以參與討論。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
在當今日新月異的數位時代,網站已經不僅僅是一個給人們提供資訊的平臺,更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS(Cascading Style Sheets)正是網站設計中的一個重要元素,扮演著關鍵的角色。
Thumbnail
這篇文章分享了作者對CSS Battle #151題目的解題方式,並強調了圖形解構的重要性。作者提到了基本的排版能力以及實際應用的弧度計算。透過這篇文章,讀者可以學習到CSS切版的技巧,同時也可以分享自己的作法,進行交流討論。
Thumbnail
不專業分享個人學習 SCSS 的筆記,知識來源為YTB講解,各路大神文章。
Thumbnail
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
這篇文章將解析CSS Battle第136題的解法,主要考驗基本CSS置中排版的能力,並提供了作者的解法與技術總結。透過互動學習,讓想要學習或練習基礎切版的朋友可以參與討論。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。