Sass基礎學習(二)

2021-10-05 13:34:53 字數 1984 閱讀 5963

巢狀屬性

巢狀屬性是指我們在進行開發過程中,往往乙個屬性會有多種設定,在開發過程中我們可以使用巢狀屬性的方式令樣式設定簡單化,語法樣式是屬性:,編譯之後的css樣式會分解出來,得到我們易懂易看的樣式,提高了開發效率。

混合-mixins

1、 mixin相當於是定義好的樣式,可以在任何地方重複使用它。

2、 在定義mixin時的語法樣式是: @mixin 名字 (引數1,引數2……)

3、 定義mixin,重寫css樣式時用@include (mixin定義的名字)即可呼叫,編譯之後的css樣式如右邊顯示。

mixins裡的引數

@mixin 名字(引數)中的引數命名是:$屬性,在@mixin中設定樣式時,屬性值可直接引用引數,在樣式引用時@index引用,後面的屬性引用直接按照引數順序輸入屬性值,也可以是屬性+屬性值的方式,編譯之後效果一致。

繼承/擴充套件-inheritance

所謂繼承和擴充套件就是在其他類中可以使用@extend可以繼承某些類裡面的樣式,編譯之後,相同樣式的會成為群組共同擁有相同樣式值,另外設定的則會單獨編譯展現。擴充套件則是使用了相同類的擴充套件之後,也會擴充套件相應的樣式。

partials與@import

@import我們都熟悉,這是引用檔案的函式,在sass之中也不例外,我們可以使用@import來引用當前檔案之外的css樣式,在sass中引用外部檔案就相當於把css檔案集合起來,每乙個部分形成了乙個partials,我們建立乙個partials時,用_名字.scss格式,因為他有下劃線開頭,所以是編譯不出來的,在scss檔案設定樣式,通過引用則可以進行編譯,從而達到引用外部css樣式效果。

資料型別-data type

注釋有三種方式,但是需要注意的是單行注釋不會出現在編譯之後的css檔案,多行注釋會出現在編譯過後的css樣式,但是不會出現在壓縮格式的編譯css樣式,強制注釋則是多了乙個「!」即使是壓縮的css格式,也會出現在編譯過後的css樣式中。

數字

1、 在命令列工具中輸入「sass -i」開啟資料型別(data-type)測試,資料型別有很多種:數字、字串、列表(多個屬性值組成)、顏色等。

2、 數字型別就和普通數字一樣,在sass之中帶有「px\em」等的樣式也屬於數字型別,可以進行加減乘除運算。

數字函式

數字函式中有abs()->絕對值;round()->四捨五入;ceil()->進製;floor->退位;min->最小值;max->最大值。

字串

字串可以用「+」、「-」「/」來進行字串的連線,但是使用「*」則會報錯。

sass基礎語法

變數 width 300px 定義乙個變數 width width 使用定義的變數 str hello.jpeg background image url img str 使用 拼接 background image url img 使用 拼接資料型別 width 300px number div ...

Sass教程二 Sass的安裝

前面已經提到了,sass是用ruby語言開發的,所以在安裝sass之前,需要先安裝ruby ruby安裝好了之後,我們就可以利用ruby的包管理工具gem安裝sass了,同樣還是在cmd裡執行以下命令 gem install sass安裝完成之後,還是老辦法檢查以下安裝是否成功 sass v 如果安...

Sass學習筆記 Sass的編譯

命令列編譯 gui 介面工具編譯 一般教程 ide自助編譯 webstorm設定 點選左上角的file settings file watchers 在彈窗的視窗的右上角點選綠色的 號,然後選擇scss arguments 配置編譯後的檔案的輸出路徑 四種編譯後css樣式 這裡有一段scss 巢狀輸...