sass安装： https://www.sassmeister.com/
编译：需要安装node环境,
1.由于gulp是基于node.js开发的，所以你在使用gulp之前，必须要先安装node。然后你可以打开node服务器并执行 npm install gulp -g 全局安装gulp.
2.然后执行npm init 创建package.json文件. 这个文件保存着你目录下的项目模块的相关信息。
3.然后执行npm intall gulp --save-dev 本地安装gulp
4.在工程目录下手动创建gulpfile.js文件。
然后你可以在gulpfile.js里最先引入gulp模块
sass基本语法：
多行注释 在编译输出的 css 文件中会保留，压缩输出格式中不会保留 --style compressed
/*
- 多行注释
*/
单行注释 在输出 css 文件时不保留
// 单行注释
强制注释 在多行注释的开头，添加感叹号！表示强制保留
/*!
- 强制注释
*/
Sass 支持7种主要的数据类型
数字(例如： 1.2, 13, 10px)
字符串(例如："foo", 'bar', baz)
颜色(例如：blue, #04a3f9, rgba(255, 0, 0, 0.5))
布尔值(例如： true, false)
空值(例如： null)
列表(list)，用空格或逗号分隔 (例如：c 1.5em 1em 0 2em, Helvetica, Arial,
sans-serif)
映射(例如： (key1: value1, key2: value2)) map映射 键->值
在 SASS 中可以对数字进行运算
同时 SASS 支持数字函数的运算
SASS 支持字符串的操作
同时 SASS 对字符串的操作有一些封装的函数的支持，方便快捷的处理字符串操作。
更多操作请参考官方文档。 http://sass.bootcss.com/docs/sass-reference/
颜色的表示有很多种
十六进制 Hex：#ff0000 等等
RGB:rgb(255, 0, 0)等等
字符串：red, blue, green 等等
等等.. ..
【注】SASS 支持所有这些颜色的表示方式
list 表示列表类型的值
在 CSS 中就是表示属性的一串值
列表中的值可以使用空格或者逗号分隔，如
border:#ccc solid 1px; 值就是列表
font-family:Courier, “Lucida Console”, monospace; 值也是列表
列表中可以包含其他的列表，如：
padding:10px 5px, 5px 5px; 值的列表中有两个列表，用逗号分隔
padding:(10px 5px) (5px 5px);可以用括号分开，编译成 css 时会去掉这些括号
SASS 中的列表相当于其他语言中的数组，SASS 也提供了一些函数方便列表的操作
length:获取列表长度
nth:获取指定位置的列表项
index:获取某个元素在列表中的位置，如果没有查询到返回 null
append:给指定的第一个列表添加一个列表项
join:合并列表
map 就是列表项目中带名称的列表
$map：(key1:value1, key2:value2, key3:value3)
\(var(key1:value1, key2:value2..):声明一个 Map
length(\)map):获取 map 中的元素对个数
map-get(\(map, key):获取\)map 中名称为 key 的值
map-keys(\(map):获取指定\)map 中所有的 key
map-values(\(map):获取指定\)map 中所有的 value
map-has-key(\(map, key):判断在\)map 中是否包含指定的 key
map-merge($map1, \(map2):将\)map1 和\(map2 合并在一起
map-remove(\)map, key):将指定名称的 key 从$map 中移除
SASS 中的布尔值，跟其他语言一样，都是用来表示真/假的逻辑判断的。
取值：true/false,sass 中可以使用比较运算符，返回的就是布尔值
比较运算符
//变量：普通变量 -默认变量-特殊变量-全局变量
//代码自上而下执行
//普通
\(fontSize:12px; //默认变量 \)yyy:200px !default;
body{
font-size: $fontSize;
height: \(yyy; } \)color:red;
//局部变量提升全局变量 !global; 变量赋值 : $color:orange;
div2{
color:$color;
$color:orange !global;}
div3{
background-color:$color;}
//特殊变量： #{表达式/变量}:进行字符串拼接
$zzzz:border-top;
div4{
#{$zzzz}: 1px solid black;}
//层级样式
div1{
width:100px;
.box{
height:200px;
background-color: red;
}
a{
background-color: red;
//父级元素选择器
&:hover{
color:orange;
background-color: blue;
}
}}
//属性嵌套 (了解)
div1{
border: {
left: {
width: 1px;
style:solid;
color:red;
};
};}
div2{
border-top: 2px dashed black;}
css文件；
body {
font-size: 12px;
height: 200px; }
div2 {
color: red; }
div3 {
background-color: orange; }
div4 {
border-top: 1px solid black; }
div1 {
width: 100px; }
div1 .box {
height: 200px;
background-color: red; }div1 a {
background-color: red; }
#div1 a:hover {
color: orange;
background-color: blue; }div1 {
border-left-width: 1px;
border-left-style: solid;
border-left-color: red; }混合和继承
/*
混合类似于c语言的宏定义
混合 代码块（不是函数）
声明 @mixin 混合名字{}
调用 @include 混合名字;
[混合可以有参或者无参] 有参可以设置默认值
*/
@mixin center-block {
margin-left:auto;
margin-right:auto;
}
div1{
@include center-block;}
@mixin clearBoth {
content:"";
display: block;
height: 0px;
clear: both;
overflow: hidden;
visibility: hidden;
}div2{
@include clearBoth;
.box{
@include clearBoth;
}}
//带参数的混合
@mixin xxx(\(padding:30px,\)border:1px solid black) {
border-right: $border;
border-top: $border;
padding-left: $padding;
}
div3{
//带默认值调用
@include xxx;
.box2{
//带参调用
@include xxx(50px);
}
.box3{
//带参调用
@include xxx(50px,2px dashed red);
}
//只想传第二个,默认没改初始值，不是没值
.box4{
@include xxx($border:2px dashed red);
}}
// @extend 继承
.btn{
width: 200px;
height: 200px;
}
.btn-parimary{
@extend .btn;
background-color: blue;
}
.btn-success{
@extend .btn;
background-color: yellow;
}
css
@charset "UTF-8";
/*混合类似于c语言的宏定义
混合 代码块（不是函数）
声明 @mixin 混合名字{}
调用 @include 混合名字;
[混合可以有参或者无参] 有参可以设置默认值
*/
div1 {
margin-left: auto;
margin-right: auto; }div2 {
content: "";
display: block;
height: 0px;
clear: both;
overflow: hidden;
visibility: hidden; }div2 .box {
content: "";
display: block;
height: 0px;
clear: both;
overflow: hidden;
visibility: hidden; }div3 {
border-right: 1px solid black;
border-top: 1px solid black;
padding-left: 30px; }div3 .box2 {
border-right: 1px solid black;
border-top: 1px solid black;
padding-left: 50px; }div3 .box3 {
border-right: 2px dashed red;
border-top: 2px dashed red;
padding-left: 50px; }div3 .box4 {
border-right: 2px dashed red;
border-top: 2px dashed red;
padding-left: 30px; }.btn, .btn-parimary, .btn-success {
width: 200px;
height: 200px; }
.btn-parimary {
background-color: blue; }
.btn-success {
background-color: yellow; }scss文件导入(合并scss)
@import "./index.scss";
@import "./混合嵌套.scss";
div1{
@include xxx(50px);}
作者：三号小玩家
