sass语言

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 中可以使用比较运算符，返回的就是布尔值
比较运算符

、 >=、 <、 <=、 !=、 ==
逻辑运算符
and、or、not
SASS 中为了更加方便的处理一些带有逻辑性的样式，如满足某些条件的时候使用指定的样
式，或者根据指定列表中的项目循环输出样式等，提供了一些控制指令进行处理
@if：条件控制指令
@for:循环指令
@each:循环指令
@while:循环指令
@if 指令是 SASS 中的一个控制指令，用于在表达式满足条件（true）的时候输出指定的
样式，在不满足条件（false）或者表达式为 null 的情况下输出其他的样式
【注】同样，也可以通过@else if 和@else 指令结合，进行多条件的判断
@for 指令在 SASS 中用于重复处理一组指令
有两种表现形式
@for $var from <开始值> l <结束值>
@for $var from to
<1> to 和 through 都是表示一个区间
<2> 唯一的区别就是停止循环的地方不一样
<3> \(var 可以是任意一个变量名称如\)i
<5> 和是 SASS 表达式并且必须是整数
@each 在 Sass 中主要被用来进行列表或者映射数据的循环
主要表示形式：@each \(var in <list> \)var 可以是任意变量名称，是 SASS 表达式并且必须是 List
@while 指令在 SASS 中用于循环重复处理样式，直到@while 表达式返回 false
函数的功能主要是数据的运算，SASS 中可以将一些值交给函数进行处理，具体的处理方式
由定义的函数具体的设计确定。
@function 函数名称(参数列表){
// 数据处理
}
在自己设计的函数或者 Mixin 中，可以包含一些警告或者错误提示信息，用户在错误使用
函数或者 mixin 时，就会看到这样的错误提示。
@warn:警告信息——会出现在命令行窗口中，编译提示
@error:错误信息——会出现在编译后的 css 文件中，错误提示
@warn message; 警告信息，警告信息一般会在执行 scss 程序生成 css 时触发，所以
出现在命令行中。
@error message; 错误信息，错误信息直接显示在编译的 css 文件中。
https://www.bilibili.com/video/BV1gt4y1m7Eo?p=465

//变量：普通变量 -默认变量-特殊变量-全局变量
//代码自上而下执行
//普通
\(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);  

}