sass scss學習筆記

2021-07-10 15:54:14 字數 1555 閱讀 5970

sass是舊版本的預處理語言,scss增加了css3的一些特性,並且支援css的拼寫規則,也就是{}跟;

mac:

首先是安裝sass,先檢查系統是否有ruby,在終端輸入「ruby -v」,沒有ruby的話,可以用brew安裝,不詳說了。

有ruby的情況下,開啟終端,輸入「sudo gem install sass」,這裡需要等待大約一分鐘,如果安裝失敗,大多數可能是被牆了,翻牆的方法自己找,然後再重複上面的命令。

檢視是否安裝成功:在終端輸入sass -v,成功了會有以下

新建檔案test.scss,輸入$color:#fff;body,在終端進入test所在的資料夾,輸入「sass --watch test.scss:test.css」,開啟test.css檢視是否編譯成功

sass可以自己定義變數,語法格式我就不說太多了

sass有以下三種編譯命令

單檔案編譯:sass <

要編譯的

sass

檔案路徑

>/style.scss:<

要輸出css

檔案路徑

>/style.css

多檔案編譯:sass sass/:css/

以上方法每次檔案有變動都需要重新執行命令進行編譯,太過麻煩,可以使用watch命令進行自動檢測:

sass --watch <

要編譯的

sass

檔案路徑

>/style.scss:<

要輸出css

檔案路徑

>/style.css

例子:sass --watch test.scss:test.css

還有grunt以及gulp的方法,但是我還沒了解過。

scss還可以用不同的風格輸出:

sass --style compressed(風格) --watch releasemsg.scss:releasemsg.css

sass可以在瀏覽器中除錯: sass --watch --scss 

--sourcemap

style.scss:style.css

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

sass 的預設變數一般是用來設定預設值,然後根據需求來覆蓋的,覆蓋的方式也很簡單,只需要在預設變數之前重新宣告下變數即可。

定義在元素外的是全域性變數,定義在元素內的是區域性變數。盡量在變數有復用的時候定義變數,不要為了定義變數而定義變數。

前端利器sass,scss安裝

之前對比了下less和sass,發現sass使用會比較複雜,所以就拋棄了sass用less寫過乙個專案,可能之前用這個寫專案的經驗太少,發現寫過以後,並沒有想象中那樣方便,但是看過很多文章以後,感覺在 寫乙個完整的專案時使用此類框架還是會比較方便,並且發現sass配合compass有很多優勢,所以還...

1 1 Sass Scss函式 數字

目錄 abs number 絕對值 ceil number 向高位取整 comparable number,number2 判斷單位 floor number 向低位取整 max number.取最大值 min number.取最小值 percentage number 轉換為百分比 random ...

Sass(scss)常用語法記錄

scss 需要使用分號和花括號。sass舉例 sidebar width 30 background color faa scss舉例 sidebar以 開頭,後為變數名 red 1875e7 div加 default為預設值 使用之前變數已賦值,就不用預設值,如果沒有,則使用預設值 content...