sass基本用法

2021-07-26 17:04:44 字數 1032 閱讀 7495

本文都是以.scss為準

普通變數

sass的變數必須是以$開頭的,後面直接跟變數名

$fontsize: 12px;

body

如果變數需要預設值,在變數值的後面加上預設值的宣告

變數的預設值的宣告方式是變數值後加上!default;

如下:

$baselineheight:        2;

$baselineheight: 1.5 !default;

這樣編譯的結果是2

普通變數的使用:

body

多值變數

多值變數分為list型別(類似js中的陣列)和map型別(類似js中的物件)

2.1 list型別

list型別定義

$px: 5px 10px 20px 30px;
list型別使用

$linkcolor:         #08c

#333 !default;

a}

2.2map型別

map資料以key和value成對出現,其中value又可以是list。

map型別定義

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
map型別使用

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);

@each

$header, $size

in$headings

}

3.跳出巢狀

//單個選擇器跳出

.parent-2

}//多個選擇器跳出

.parent-3

.child2

}}

Sass語法 一 基本用法

編譯後的css meng 在日常編輯過程中,可以給變數新增預設值 default 標誌。如果在其變數值沒有單獨設定,那麼就用新增預設值的變數值。若設定了,那麼就用重新設定的變數值。如下 變數可以乙個乙個的宣告,也可以多個一起宣告。多個一起宣告,用起來是比較方便的,特別是宣告相似功能的變數。a.全域性...

關於Sass用法

sass是css預處理器,sass是一種易於使用的樣式語言,可幫助減少傳統css的許多重複性和可維護性挑戰。學習sass可以編寫出可重複使用的樣式效,也是在工作和面試要求中不可或缺的一項技能了。sass使您可以使用css中不存在的功能,例如變數,巢狀規則,混合,匯入,繼承,內建函式和其他內容。支援 ...

sass用法總結

一 sass安裝 1 移除原有的ruby源位址 gem sources remove 2 新增可用的ruby源位址 gem sources a 3 安裝sass gem install sass 4 sublime支援scss檔案高亮顯示 借助package control安裝sass外掛程式,之後...