學習筆記 SASS安裝及建立

2021-08-17 15:40:19 字數 1524 閱讀 2024

關於sass:

sass 是一種 css 開發工具,讓 css 的處理實現了可程式設計處理。

css 不是乙個程式語言,可以用它來開發網頁樣式,但是沒有辦法用它進行程式設計。sass 的出現,讓 css 實現了通過**程式設計來實現的方式。

sass 擴充套件了 css3,增加了規則、變數、混入、選擇器、繼承等等特性,可以生成風格良好的 css 樣式表檔案,易於組織和維護。

一、sass安裝:

sass 是 ruby 語言開發的乙個用於動態程式設計 css 檔案的框架,但是學習 sass 跟 ruby 沒有任何關係,唯一的聯絡就是 sass 的執行以來 ruby 環境,因此要在使用sass前,必須安裝 ruby!

sass 官網:

windows 安裝:

1、安裝 ruby  ( sass 的依賴環境,必須安裝)。

2、通過命令提示符黑視窗執行命令進行安裝:

gem install sass

檢視安裝是否成功:

一、sass使用:

1、建立sass檔案:

(手動建立)

手動建立的sass檔案(當前檔案)和css檔案(目標檔案)所屬資料夾在同一目錄下,了解即可,不推薦使用

一般,需要在專案資料夾(專案名稱自己起,最好不要是中文)的根目錄下手動建立sass檔案,例如:common.scss

同時,在專案資料夾的根目錄下手動建立css資料夾,例如:css

sass    [scss_name]  : 

sass       scss 檔案  :  編譯好的目標 css 全路徑名稱

例如:            sass  common.scss   :  csss/common.css

編譯結果:在指定的資料夾 css 中生成了指定的 css 樣式表檔案:common.css

(自動建立)

自動編譯命令:

watch 命令:

sass --watch sass:css

使用這個命令前必須在專案資料夾中(根目錄下),預先建立好sass子資料夾,即當前檔案所屬資料夾與目標檔案所屬資料夾,在同一目錄下(相對路徑的第三種),並在根目錄下開啟命令提示符輸入以上命令。

2、編譯輸出格式:

預設情況下,sass 提供了四種格式的 css 輸入,預設情況輸出是巢狀格式

格式                  描述

nested              巢狀—    不常用

compact           緊湊—    常用    

修改輸出樣式: sass --watch sass:css --style compact

expanded         擴充套件—    常用    規範的 css **格式    

修改輸出樣式: sass --watch sass:css --style expanded

修改輸出樣式: sass --watch sass:css --style compressed

Sass學習筆記

安裝 2.開啟ruby的命令視窗 start command prompt with ruby 輸入gem install sass gem install sass pre 要安裝beta版本的 gem update sass 公升級sass vsass hgit安裝 git clone git ...

Sass學習筆記

1.全域性變數p background color color red span div2.default 第二種,使用前面定義的值 color red 變數申明帶有 default,但是前面還有這個變數的申明 color blue default p3.變數用 包裹 btnclass btn de...

Sass學習筆記。

定義 css預處理器定義了一種新的語言,其基本思想是,用一種專門的程式語言,為css增加了一些程式設計的特性,將css作為目標生成檔案,然後開發者就只要使用這種語言進行編碼工作。採用ruby語言編寫的一款css預處理語言 副檔名 sass 嚴格的縮排式語法 scss 與平時css語法書寫類似 scs...