資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用哪個命令從命令列執行 SASS 程式碼？
SASS 是“Syntactically Awesome Style Sheets”（語法高效樣式表）的縮寫。它是一個預處理器，編譯 SCSS 程式碼並將其轉換為 CSS（層疊樣式表）。它是 CSS 的超集。
本教程將教你如何使用終端編譯 SCSS 程式碼。
從終端執行 SASS 的步驟
使用者應按照以下步驟從終端執行 SASS 程式碼。
步驟 1 - 使用者應該在其本地計算機上安裝 Node.JS。如果沒有，請訪問 https://nodejs.com.tw/en/download 下載並安裝。
步驟 2 - 現在，我們需要建立一個 Node 專案。在專案目錄中開啟終端，並在終端中執行以下命令以啟動新的 NodeJS 專案。
npm init -y
步驟 3 - 現在在終端中執行以下命令以在當前 Node 專案中安裝 SASS。
npm i node-sass
步驟 4 - 開啟當前專案的 package.json 檔案，並在“scripts”物件中新增以下行。
"scss": "node-sass --watch scss -o css"
步驟 5 - 在專案目錄中建立 SCSS 和 CSS 資料夾。另外，在 SCSS 目錄中新增 style.scss 檔案，在 CSS 目錄中新增 style.css 檔案。
這是專案目錄結構。
步驟 6 - 現在在 style.scss 檔案中新增以下 SASS 程式碼。
$height: 45rem;
$border: 2px, solid, blue;
div {
height: $height;
border: $border;
border-radius: 1rem;
}
步驟 7 - 現在，在終端中執行以下命令以編譯 SCSS 程式碼。
npm run scss
步驟 8 - 它將在 style.css 檔案中生成以下輸出程式碼。如果沒有，請在指令碼執行時更改 scss 檔案的程式碼。
div {
height: 45rem;
border: 2px, solid, blue;
border-radius: 1rem;
}
現在，每當使用者更改 style.scss 檔案時，style.css 檔案中的輸出也會發生更改。
為什麼我們使用 SASS 而不是 CSS？
與 CSS 相比，使用 SASS 有很多好處。
變數 - Sass 允許我們建立變數，這可以簡化 CSS 程式碼並降低複雜性。例如，我們可以定義一個 backgroundColor 變數併為其賦值。之後，我們可以使用變數貫穿整個程式碼，而不是硬編碼的顏色值。
Mixin - Sass 允許我們定義 mixin，它們是可重用的程式碼塊，就像我們在程式碼其他部分可以使用的函式一樣。
巢狀 - Sass 允許我們將 CSS 選擇器彼此巢狀，使我們的程式碼更有條理且更易於閱讀。例如，我們可以將 ul 選擇器巢狀在 nav 選擇器中以設定導航選單的樣式。
匯入 - 我們可以在 SASS 中建立部分 SCSS 檔案並將它們匯入到其他 SCSS 檔案中，將不同元件的程式碼分解到單獨的檔案中。
300 次瀏覽
