sass背景是ruby語言寫的,增加了變數,巢狀,混合,匯入等功能,可依賴ruby模組(在windows安裝)。本章依賴於node後台,將sass包,解壓縮至node安裝位址。
.scss 為副檔名
sass,可以理解為一種css的預處理器,用於進行網頁樣式設計,再編譯成正常的css檔案
'options',
' -w, --watch watch a directory or file', 監聽/檢視乙個檔案或者目錄
' -o, --output output directory', 輸出到檔案目錄
' -v, --version prints version info', 檢視node-sass版本
' --help print usage info' 檢視所有sass幫助命令符
一、檔案的轉換方式
eg:node-sass scss/01.scss css/01.css
在scss檔案目錄下開啟powershell彈窗,輸入以下命令:
sass 01.scss
如圖,可以.scss檔案轉換成css語法格式:
sass提供四種編譯風格:(了解)
*nested
:巢狀縮排的
css**,它是預設值。
*expanded:沒有縮排,擴充套件的css**
*compact:簡潔格式的css**
*compressed:壓縮後的css**
sassscript語法:
①注釋: /* */ 多行注釋;
// 當行注釋;
優點:1、sass可以讓編寫可維護的css更加簡易方便,減少**量。
2、相容 css3,css 基礎上增加變數、巢狀 (nesting)、混合 (mixins)等。 3
、通過函式進行顏色值與屬性值的運算。 4
、提供控制指令
②eg:
1、通過命令開啟sass檔案監聽:node-sass -w scss -o css
2、開啟需要編譯的檔案:注釋如下
效果圖:
本篇簡述靈活的定義使用sass語法和實踐效果,感謝觀賞,thanks you for reading this article!
sass入門初體驗
接上文less入門初體驗,接下來講講sass,sass有兩種檔案字尾名,一種是.sass,另一種是.scss。前者類似於ruby的語法規則,沒有花括號,沒有分號,具有嚴格的縮排 而後者更貼近於css的語法規則,易於閱讀,更具語義性,所以本文採用.scss字尾名來編寫sass 編譯1 ruby sas...
常見的CSS預處理器之Sass初體驗
sass 英文全稱 syntactically awesome stylesheets 是乙個最初由hampton catlin設計並由natalie weizenbaum開發的層疊樣式表語言。sass是乙個將指令碼解析成css的指令碼語言,即sassscript,它包括兩套語法。最開始的語法叫 縮...
HTML與CSS初體驗
html 超級文字標記語言 hypertext makeup language 作用 告知瀏覽器網頁的結構。元素 開始標記 內容 結束標記 例如 這就是乙個元素 css級聯樣式表 cascading style sheets 作用 告知瀏覽器網頁中的元素應該如何表現 屬性 用來指定元素的附加資訊。t...