iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

SASS 基礎初學三十天系列 第 5

DAY 05 實作環境配置 - 2

安裝套件

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

在擴充套件中,可以下載 Sass 這款,來幫助檢查程式碼的lint

Untitled

如果你有開啟 lint on save 的功能,在你儲存後 vscode 就會幫你整理好沒寫好的格式;如果你不小心在 sass file 中寫成 scss ,他也會幫你把 {} ; 等符號移除。

但是如果!你真的也不想這麼麻煩的新增一個專案去做練習,也可以用 codepen 或是 codesandbox 的方式來簡單的實作練習~

Untitled

codepen 中,針對 CSS 可以去選擇各種 CSS 預選器,其中就有 SCSS, SASS 可以選擇

Untitled

codesandbox 中,在 Dependencies 的部分也可以去添加 sass 的相關套件,檔案上也能直接新增 sass, scss files

以上的這些方法也可以來跟進接下來的練習與實作,所以選擇用什麼工具來學習就取決於大家囉~


除此之外,也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了!是世界奇觀!

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端?後端?你早晚都要全端的,何不從現在開始?


上一篇
DAY 04 實作環境配置 - 1
下一篇
DAY 06 Variable
系列文
SASS 基礎初學三十天30

尚未有邦友留言

立即登入留言