1.變量
在Sass中使用$符號定義變量拗窃。
$defaultColor: #fff;
在sass可以直接使用變量：
$defaultColor: #fff;
body {
background：$defaultColor; //編譯后#fff
}
注意瞎领，sass也有變量作用域，如果你在一個選擇器內(nèi)部定義了一個變量随夸，那么它只在這個選擇器內(nèi)部生效九默。
$defaultColor: #fff;
body {
$defaultColor: #ccc;
background：$defaultColor; //編譯后#ccc
}
a{
color:$defalutColor;//編譯后#fff
}
但是可以通過!global定義全局變量
$defaultColor: #fff;
body {
$defaultColor: #ccc !globa;
background：$defaultColor; //編譯后#ccc
}
a{
color:$defalutColor;//編譯后#ccc
}
2.函數(shù)
在sass中，通過@function定義函數(shù)宾毒，通過@return返回值驼修，不返回樣式。
(1)內(nèi)置函數(shù)
官網(wǎng)函數(shù)列表
(2)自定義函數(shù)
創(chuàng)建一個px轉(zhuǎn)rem得函數(shù)
@function pxToRem($px){ //$px為需要轉(zhuǎn)換的字號
@return $px / 100px * 1rem; //100px為根字體大小
}
a{
font-size:pxToRem(16px);
height:pxTorem(20px)
}
編譯后
a{
font-size:0.16rem;
height:0.2rem;
}
3.語法技巧
(1) 多層嵌套
body{
color: black;
div {
color: red;
span{
display:block;
}
}
}
編譯后
body{
color:black;
}
body div{
color:red;
}
body div span{
display:block;
}
(2) 屬性嵌套
a{
font: {
size: 12px;
weight: bold;
}
}
編譯后
a{
font-size:12px;
font-weight:bold;
}
(3) &符號的使用
在Sass中诈铛，&表示父元素乙各。
button {
&:hover { color: red; }
}
.main {
&-header { color: bule; }
}
編譯后
button:hover{
color:red;
}
.main-header{
color:blue;
}
4.運算
Sass支持數(shù)字的加減乘除、取余運算 (+, -, *, /, %), 關(guān)系運算<, >, <=, >=以及相等運算==, !=幢竹。
a{
font-size:(12px/16px);
height:10px + 20px;
}
編譯后
a{
font-size:0.75px;
height:30px;
}
注意：由于原生css語法中就有使用/的地方耳峦，所以在sass只有以下情況視為除法運算
- 值被圓括號包括
( 10px / 20px) - 屬于算數(shù)表達式的一部分
(10px + 20px/40px) - 如果有一個值是變量或函數(shù)
$hight/10 -
sass中+也可以做字符串拼接
