放在.scss里面使用
// /!注释/
//有三种形式：
// /!（1）//comment：该注释只是在.scss源文件中有，编译后的css文件中没有。
// /!（2）/! /：重要注释，任何style的css文件中都会有，一般放置css文件版权说明等信息。
// /!（3）/ /：该注释在compressed的style的css中没有，其他style的css文件都会含有。/
// /
$fontColor:#fff; //定义一个变量
$color1:#aeaeae; //定义变量
.dov-color{
color:$color1;
}
//嵌套引用
//嵌套引用在其他编程语言中即是字符串插值，需要用#{}进行包裹：
$left:left;
.dov-#{$left}-eg{
background-color:$color1;
color:$fontColor;
}
//变量计算
//Sass中也是支持对于变量进行简单的计算：
$chang:.9rem;
.dov-jisuan{
font-size:$chang+1rem;
}
//变量可以支持计算的类型，还是比较多的：
.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属性，可以写成：
/* 研究一下哪里用到比较多这个方式*/
// p {
// border: {
// color: red;
// }
// }
//父元素引用
//在嵌套的子层级中，允许使用&引用父元素：
.dov-curosr{
&:hover{
color:red;
}
}
//代码重用
//继承
//SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1{
font-size:19px;
background-color:black;
padding:1rem;
width:50%;
border-radius:6px;
}
.class2{
@extend .class1;
color:#fff;
}
//Mixin&Include
//Mixin有点像C语言的宏（macro），是可以重用的代码块。
//使用@mixin命令，定义一个代码块。
//定义代码块
@mixin centers {
float: left;
margin-left: 10px;
}
//使用@include命令，调用这个mixin。
.minxin-div {
@include centers;
}
/*
@*********
编程式方法
流程控制
条件语句
循环语句
函数
*/
//函数
//Sass允许用户自定义函数，原型如下所示：
//复制代码
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
