放在.scss里面使用
// /!注釋/
//有三種形式：
// /!（1）//comment：該注釋只是在.scss源文件中有，編譯后的css文件中沒有。
// /!（2）/! /：重要注釋，任何style的css文件中都會(huì)有，一般放置css文件版權(quán)說明等信息。
// /!（3）/ /：該注釋在compressed的style的css中沒有，其他style的css文件都會(huì)含有。/
// /
$fontColor:#fff; //定義一個(gè)變量
$color1:#aeaeae; //定義變量
.dov-color{
color:$color1;
}
//嵌套引用
//嵌套引用在其他編程語言中即是字符串插值，需要用#{}進(jìn)行包裹：
$left:left;
.dov-#{$left}-eg{
background-color:$color1;
color:$fontColor;
}
//變量計(jì)算
//Sass中也是支持對(duì)于變量進(jìn)行簡(jiǎn)單的計(jì)算：
$chang:.9rem;
.dov-jisuan{
font-size:$chang+1rem;
}
//變量可以支持計(jì)算的類型，還是比較多的：
.px-cook {
font: 10px/8px;? ? ? ? ? ? // Plain CSS, no division
$width: 1000px;
width: $width/2;? ? ? ? ? ? // Uses a variable, does division
width: round(1.5)/2;? ? ? ? // Uses a function, does division
height: (500px/2);? ? ? ? ? // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
font: (italic bold 10px/8px); // In a list, parentheses don't count
}
//屬性也可以嵌套，比如border-color屬性，可以寫成：
/*? 研究一下哪里用到比較多這個(gè)方式*/
// p {
// border: {
//? ? color: red;
// }
// }
//父元素引用
//在嵌套的子層級(jí)中，允許使用&引用父元素：
.dov-curosr{
&:hover{
color:red;
}
}
//代碼重用
//繼承
//SASS允許一個(gè)選擇器，繼承另一個(gè)選擇器。比如，現(xiàn)有class1：
.class1{
font-size:19px;
background-color:black;
padding:1rem;
width:50%;
border-radius:6px;
}
.class2{
@extend .class1;
color:#fff;
}
//Mixin&Include
//Mixin有點(diǎn)像C語言的宏（macro），是可以重用的代碼塊。
//使用@mixin命令，定義一個(gè)代碼塊。
//定義代碼塊
@mixin centers {
float: left;
margin-left: 10px;
}
//使用@include命令，調(diào)用這個(gè)mixin。
.minxin-div {
@include centers;
}
/*
@*********
編程式方法
流程控制
條件語句
循環(huán)語句
函數(shù)
*/
//函數(shù)
//Sass允許用戶自定義函數(shù)，原型如下所示：
//復(fù)制代碼
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
