Sass中Interpolation 的用法

2021-08-01 06:40:26 字數 1151 閱讀 2025

scss語法:

$prop2: border;

@mixin longzhoufeng($wid, $sty, $col): # # #; //其實就是結合混合巨集傳多個引數;

}.myinterpolation2

css語法:

.myinterpolation2

如圖:

scss語法:

@charset

"utf-8"; //不宣告在ruby編譯時會報錯,因為下面有中文注釋;

//$prop2

: (padding, margin); //多個值用括號;

$prop3

: padding, margin; //也可以這樣;

@mixin longzhoufeng($side, $val)-#: $val; //注意'-'前後不能有空格;

}}.myinterpolation3

css語法

.myinterpolation3

scss語法:

@charset

"utf-8"; //不宣告在ruby編譯時會報錯,因為下面有中文注釋;

@mixin selector($c, $s, $i, $w, $d, $sc, $ic, $wc, $dc)-success

.#-info

.#-warning

.#-danger

}.btn

css語法

.btn

.btn

.btn-success

.btn

.btn-info

.btn

.btn-warning

.btn

.btn-danger

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 巢狀輸...

sass用法總結(持續更新中)

官網 1,巢狀規則 1.1普通巢狀 sass 允許將一套 css 樣式巢狀進另一套樣式中,內層的樣式將它外層的選擇器作為父選擇器 1.2父選擇器 hover 在巢狀 css 規則時,有時也需要直接使用巢狀外層的父選擇器,例如,當給某個元素設定hover樣式時,或者當body元素有某個 classna...