后綴名
SCSS是SASS3的語(yǔ)法分支，其中以\*.scss結(jié)尾的是scss文件昭娩，以\*.sass結(jié)尾的是sass文件凛篙。scss文件和我們平時(shí)使用的css格式相同，表達(dá)式部分使用{}括起來(lái)题禀。
/* .sass文件的語(yǔ)法形式 - 縮進(jìn)式 不帶{}和分號(hào)*/
$baseFont: 14px
.main
width: 100%
height: 100vh
p
font-size: $baseFont
/* .scss文件的語(yǔ)法形式 */
$baseFont: 14px;
.main {
width: 100%;
height: 100vh;
p {
font-size: $baseFont;
}
}
/* .css文件的語(yǔ)法形式 */
.main {
width: 100%;
height: 100vh;
}
.main p {
font-size: 14px;
}
注釋
SCSS文件支持兩種注釋方式：/* */ 和 //鞋诗，其中 /**/是標(biāo)注注釋?zhuān)诰幾g的時(shí)候會(huì)被保留下來(lái)。而//單行注釋不會(huì)被轉(zhuǎn)譯出來(lái)迈嘹。
/*我是標(biāo)準(zhǔn)注釋 */
body {
width: 100%;
background: #fff; // 設(shè)置背景顏色
}
編譯后的結(jié)果：
/*我是標(biāo)準(zhǔn)注釋 */
body {
width: 100%;
background: #fff;
}
單個(gè)文件引入 @import
/*! a.css*/
.f-s--lg {
font-size: 22px;
}
/*! b.scss */
.m-t--lg {
margin-top: 50px;
}
/*! c.scss */
@import './a.scss';
@import './b.scss';
.app-text--success {
color: blue;
}
轉(zhuǎn)譯后：(c.css)
.m-t--lg {
margin-top: 50px;
}
.app-text--success {
color: blue;
}
.app-text--success {
color: blue;
}
變量
Sass對(duì)于變量類(lèi)型不是非常嚴(yán)格，和JS一樣是弱類(lèi)型語(yǔ)言全庸。
scss的變量以$開(kāi)頭秀仲，后面緊跟變量名，變量名與變量之間用:隔開(kāi)壶笼。scss變量名大小寫(xiě)敏感神僵。如果在變量后加上 !default則表示默認(rèn)值。如果需要覆蓋默認(rèn)值覆劈，只需要在默認(rèn)變量之前定義一遍即可保礼。
$font-size: 14px;
$color-success: green;
$color-success: blue !default; // 默認(rèn)值
p {
font-size: $font-size;
color: $color-success;
}
/*! 解析后的css */
p {
font-size: 14px;
color: green;
}
Scss 變量可以使用
type-of()函數(shù)來(lái)檢測(cè)這些變量的類(lèi)型
/*! 字符串類(lèi)型*/
// 分為：帶引號(hào)的和不帶引號(hào)的兩種字符串
$prefix: 'ui-';
$blod: blod;
/*! 數(shù)字類(lèi)型*/
$a: 10; $b: 1.5; $c: 15px;
/*! 顏色類(lèi)型*/
$color1: #fff;
$color2: blue;
$color3: rgba(0,0,0,.5);
/*! 布爾類(lèi)型*/
$is-top: true / false;
/*! 空值類(lèi)型*/
$d: null;
/*! 值列表*/
$list: 10px 15px 10px;
$list2: Helvetica, Arial, sans-serif;
變量的特殊調(diào)用 #{$prefix}
在項(xiàng)目中為了防止樣式的覆蓋，會(huì)給css的類(lèi)名加上前綴责语。在一般的css文件中會(huì)一個(gè)一個(gè)的類(lèi)加上前綴炮障，在scss中則可以使用#{$prefix}的形式統(tǒng)一加上前綴。
$prefix: 'ui-'!default;
.#{$prefix}alert {
// code ...
}
/*! 解析后的css */
.ui-alert{
// code ...
}
多值變量之List
List相當(dāng)于JavaScript中的數(shù)組坤候，使用空格 或者 ,或者()分割多個(gè)值胁赢，可使用nth($val, $index)來(lái)取值。還有length($list),join($list1,$list2,[$separator])等方法白筹。具體參考SASS FUNCTION智末。
定義List
/*! 類(lèi)似JS中的一維數(shù)組*/
$list: 10px 15px 10px 5px;
/*! 類(lèi)似JS中的二維數(shù)組*/
$list2: (10px 15px) (20px 25px);
$list3: 10px 15px, 20px 30px;
使用
$font: 12px 14px;
$margin: (5px 10px) (15px 20px);
.main {
margin: nth($margin, 2);
font-size: nth($list, 1);
p {
margin: nth($margin, 1);
font-size: nth($list, 2);
}
}
/*! 轉(zhuǎn)譯后的css */
.main {
margin: 15px 20px;
font-size: 12px;
}
.main p {
margin: 5px 10px;
font-size: 14px;
}
多值變量之Map
Map類(lèi)型以鍵值對(duì)形式出現(xiàn): $map: (key1: val1, key2: val2, ...),可以通過(guò)map-get($map, $key)取值谅摄。還有 map-keys($map) map-values($map)等。具體參考SASS FUNCTION系馆。
定義Map
$map: (h1: 2em, h2: 1.5em);
使用
$prefix: 'app-';
$color-list: (
success: green,
danger: red,
wraning: orange
) !default;
@each $key, $val in $color-list {
.#{$prefix}text--#{$key} {
color: $val;
}
}
/*! 轉(zhuǎn)譯后的css */
.app-text--success {color: green;}
.app-text--danger {color: red;}
.app-text--warning {color: orange;}
下期預(yù)告
- 嵌套（Nesting）
- 條件語(yǔ)句 （if/else）
- 循環(huán) （for）
- 遍歷 （each）
- 運(yùn)算 （operation）
