Sass學習筆記。

2021-08-09 07:19:38 字數 1181 閱讀 6182

定義:css預處理器定義了一種新的語言,其基本思想是,用一種專門的程式語言,為css增加了一些程式設計的特性,將css作為目標生成檔案,然後開發者就只要使用這種語言進行編碼工作。(採用ruby語言編寫的一款css預處理語言)

副檔名:.sass(嚴格的縮排式語法) .scss(與平時css語法書寫類似) scss和css寫法無差別,這也是sass後來越來越受大眾喜歡原因之一。

sass編譯

方法:

命令編譯(我喜歡)

gui工具編譯

自動化編譯(grunt和gulp)

命令編譯:

單檔案編譯

sass(要編譯的sass檔案路徑)/style.scss:(要輸出css檔案路徑)/style.css

多檔案編譯

sass sass/:css/

上面的命令表示將專案中的"sass"資料夾中所有".scss"(".sass")檔案編譯成".css"檔案,並且將這些css檔案都放在專案"css"資料夾中。

開啟」watch」功能,這樣只要你的**進行任何修改,都能自動監測到**的變化,並且給你直接編譯出來:

sass  --watch  (要編譯的sass檔案路徑)/style.scss:(要輸出css檔案路徑)/style.css
sass常見的編譯錯誤

字元編碼引起的(不支援」gbk」編碼,設定為」utf-8」)

路徑中的中文字元(不要使用中文字元命名檔案目錄名)

不同樣式風格的輸出方法:

1.巢狀輸出方式 nested

2.展開輸出方式 expanded 命令列最後加 -- style expanded

3.緊湊輸出方式 compact

4.壓縮輸出方式 compressed

sass普通變數與預設變數
普通變數:定義之後可以在全域性範圍內使用。

預設變數:sass的預設變數僅需要在值後面加上!default即可。

(sass的預設變數一般是用來設定預設值,然後根據需求來覆蓋的,只需要在預設變數之前重新宣告下變數即可。)預設變數的價值在進行元件化開發的時候會非常有用。

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學習筆記

2 安裝haml sass 開啟ruby的命令符面板,輸入 gem install haml 和 gem install sass 3 進入相應的檔案中,執行命令 sass test.scss test.css sass style compressed nested compact expande...