Sass
Sass是什么
中文官网： https://www.sass.hk/
CSS用来编写网页样式，为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。
SASS (Syntactically Awesome StyleSheets)是一种动态的CSS（CSS预处理器），它扩展了 CSS 语法，定义了一套新的语法规则和函数，以加强和提升CSS。
还有一种CSS扩展语言叫 less https://www.bootcss.com/p/lesscss/#guide
Sass 扩展了 css 的特性：
变量
嵌套规则
@import导入样式
@mixin 混合器及传参
@extend 继承
@if、@for、@function 等
Sass和Scss
Sass包括两套语法：
最开始的语法叫做“缩进语法”，使用缩进来区分代码块，并且用回车将不同规则分隔开；
而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。
通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。
.sass文件
body
background-color: red
font-size: 16px
div
color: red
.scss文件
body{
background-color: red;
font-size: 16px;
}
浏览器不认识sass，需要编译成css文件！！
此外，你仍然可以在Sass中写普通的CSS语句！
安装Sass
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。
安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
安装完成后需测试安装有没有成功,运行CMD输入以下命令：
ruby -v
//如安装成功会打印
ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]
因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源：
//1.删除原gem源
gem sources --remove https://rubygems.org/
//2.添加国内gem源
gem sources --add https://gems.ruby-china.com/
//3.打印是否替换成功
gem sources -l
//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://gems.ruby-china.com
安装 Sass 输入下面的命令：
gem install sass
验证安装情况：
sass -v
Ruby Sass 3.7.4
Sass常用命令：
//更新sass
gem update sass
//查看sass版本
sass -v
//查看sass帮助
sass -h
编译sass
sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-sass等。
命令行编译
//单文件转换命令
sass sass/a.scss css/a.css --style expanded
sass sass/a.scss:css/a.css --style expanded
//单文件监听命令
sass --watch sass/input.scss:css/output.css --style expanded
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch sass:css --style expanded
监听目录sass中的所有scss文件，输出到目录css中，编译格式为expanded
编译配置选项
sass内置有四种编译格式：nested、expanded、compact、compressed
/* 未编译样式 */
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
nested 编译排版格式（嵌套的）
/命令行内容/
sass style.scss:style.css --style nested
/编译过后样式/
```css
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 编译排版格式（展开的）
/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
```css
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
compact 编译排版格式（紧凑的）
/命令行内容/
sass style.scss:style.css --style compact
/编译过后样式/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
compressed 编译排版格式（压缩的）
/命令行内容/
sass style.scss:style.css --style compressed
/编译过后样式/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
软件方式编译
koala 和 codekit,它们是优秀的编译器，界面清晰简洁，操作起来也非常简单。
koala是一个国产免费前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。
koala：http://koala-app.com/index-zh.html
注：以下均为scss语法
变量
sass使用$符号来标识变量
$nav-color: #F90;
$width: 100px;
nav {
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
嵌套规则
在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。
Sass允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。
#box{
width:100px;
height:100px;
h1{
text-align:center;
}
span{
font-size:16px;
a{
color:blue
}
}
}
//编译后
#box {
width: 100px;
height: 100px;
}
#box h1 {
text-align: center;
}
#box span {
font-size: 16px;
}
#box span a {
color: blue;
}
父选择器的标识符&
a {
background-color:red;
&:hover{
font-size:60px;
}
}
//编译后
a {
background-color: red;
}
a:hover {
font-size: 60px;
}
@import导入样式
css有一个特别不常用的特性，即@import url()规则，它允许在一个css文件中导入其他css文件。 页面打开时，link引用的css文件被加载。而@import引用的CSS等页面加载完(DOM)之后再加载。
sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。
@import “sidebar”;这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。
// a.scss
$width : 100px;
.before {
width: $width;
}
@import "b";
.after {
width: $width;
}
.container {
width: $width;
height: $height;
border: 1px solid;
}
// b.scss
$width : 200px;
$height : 200px
编译后
// a.css
.before {
width: 100px;
}
.after {
width: 200px;
}
.container {
width: 200px;
height: 200px;
border: 1px solid;
}
/
/ bgblue.scss
aside {
background: blue;
color: white;
}
.bluebox {
@import "bgblue"
}
//生成的结果
.bluebox {
aside {
background: blue;
color: #fff;
}
}
混合器（宏） @mixin
你可以通过sass的混合器实现大段样式的重用。
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
ul.plain {
color: #444;
@include no-bullets;
}
// 编译后：
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
给混合器传参
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover {
color: $hover;
}
&:visited {
color: $visited;
}
}
a {
@include link-colors(blue, red, green);
}
// 编译后：
a {
color: blue;
}
a:hover {
color: red;
}
a:visited {
color: green;
}
@extend 使用选择器继承来精简CSS
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
// 编译后：
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
border: 1px solid red;
background-color: #fdd;
border-width: 3px;
}
@if
// 当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：
p {
@if 1 + 1 == 2 {
border: 1px solid; }
@if 5 < 3 {
border: 2px dotted; }
@if null {
border: 3px double; }
}
// 编译为
p {
border: 1px solid;
}
@for
// @for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。
@for $i from 1 through 3 {
.item-#{
$i} {
width: 2em * $i; }
}
或者
@for $i from 1 to 4 {
.item-#{
$i} {
width: 2em * $i; }
}
// 编译为
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
@function
// Sass支持自定义函数，并能在任何属性值或Sass script中使用：
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar {
width: grid-width(5); }
// 编译为
#sidebar {
width: 240px;
}
…