本文都是以.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外掛程式,之後...