1. 安装
本文使用的是Node.js 中的npm进行安装，如果未安装Node.js，先安装Node.js。下载Node.js (nodejs.dev)，具体安装方法可参考win10安装并配置node.js_qq_34732729的博客-CSDN博客_win10安装node
打开命令行，输入
npm install -g sass
安装后，输入下面代码检查sass版本
sass --version
一个小解释：后缀名.scss和.sass的区别是：scss文件代码块使用花括号包起来，和原css相同，sass文件中代码块不使用花括号包起来，但相同的代码两者编译后的css文件相同，本文用的scss文件。
2.使用
在一个目录中新建文件 test.html,test.scss，然后命令行切到该目录下执行下面命令进行编译
sass test.scss test_out.css
解释：这里的test.scss换成你的scss文件，test_out.css换成你需要编译成的css文件名
然后再html文件中引入test_out.css 文件
1. 变量
变量是和js中的变量的作用类似，可以存储css属性值，比如你存储了一个颜色值，下面的代码中都用到这个颜色值，当你需要改变颜色的时候，只需要改变这个变量的值，下面的颜色值都随着改变。Sass 使用 $ 符号 作为变量的标志
在test.scss中编写
$bg-color: green;
.container{
width:300px;
height:300px;
background:$bg-color;
}
编译后的 test_out.css文件中代码：
.container {
width: 300px;
height: 300px;
background: green;
}
页面显示效果：
2.嵌套
2.1选择器嵌套
scss文件代码：
$bg-color: green;
.container{
width:300px;
height:300px;
background:$bg-color;
h1{
color:#FFFFFF;
}
.article{
width:100%;
height:50px;
background:pink;
p {
font-size:30px;
}
}
}
编译后 css文件
.container {
width: 300px;
height: 300px;
background: green;
}
.container h1 {
color: #FFFFFF;
}
.container .article {
width: 100%;
height: 50px;
background: pink;
}
.container .article p {
font-size: 30px;
}
页面效果：
2.2 属性嵌套
scss 文件代码：
.my-div{
width:300px;
height:300px;
border: {
left:3px solid #CCCCCC;
top:5px dashed orange;
bottom:1px solid #000000;
right:10px dashed lime;
}
}
编译后
.my-div {
width: 300px;
height: 300px;
border-left: 3px solid #CCCCCC;
border-top: 5px dashed orange;
border-bottom: 1px solid #000000;
border-right: 10px dashed lime;
}
页面效果：
3.继承
此处继承和面向对象的继承概念相似，选择器可以继承另一个选择器的样式。想要使用继承功能，要使用 @extend 后加要继承的选择器
scss文件代码：
.parent-div{
width:300px;
height:100px;
}
.child-div1{
@extend .parent-div;
background:pink;
}
.child-div2{
@extend .parent-div;
background:lime;
}
编译后
.parent-div, .child-div2, .child-div1 {
width: 300px;
height: 100px;
}
.child-div1 {
background: pink;
}
.child-div2 {
background: lime;
}
页面效果：
4. 混合（Mixin）
混合（Mixin）我理解的是类似函数声明，可以带参数；声明用指令语法 @mixin ,语法：
@mixin mixinname
引用时用指令：@include 语法：
@include mixinname
4.1 不带参数@mixin声明和引用
scss 文件代码
@mixin my-font{
font-size:40px;
font-weight:800;
color:orange;
}
.p{
width:300px;
height:100px;
border:1px solid #cccccc;
@include my-font;
}
编译后
.p {
width: 300px;
height: 100px;
border: 1px solid #cccccc;
font-size: 40px;
font-weight: 800;
color: orange;
}
页面效果
4.2带参数mixin声明和引用
如果一个属性可以有多组值，如border、box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...
scss文件代码
@mixin my-div($shadow...){
box-shadow:$shadow;
}
.his-div{
width:300px;
height:100px;
@include my-div(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3))
}
编译后
.his-div {
width: 300px;
height: 100px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);
}
页面效果
- @import引入文件
类似 CSS，Sass 支持 @import 指令。 @import 指令可以让我们导入其他文件等内容。 CSS @import 指令在每次调用时，都会创建一个额外的HTTP请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。 语法：
@import filename
test.scss 文件代码
@import 'test_one';
.div2{
width:300px;
height:200px;
background:blue;
}
test_one.scss 文件代码
.div1{
width:300px;
height:100px;
margin-bottom:25px;
background:pink;
}
编译后，test_out.css 文件代码
.div1 {
width: 300px;
height: 100px;
margin-bottom: 25px;
background: pink;
}
.div2 {
width: 300px;
height: 200px;
background: blue;
}
效果：
