携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
我们知道构成web项目的三要素之一-CSS，同HTML一样，是一种简单易用的标记语言，主要用于修饰HTML。从本质上来讲，CSS并不是真正意义上的编程语言，无法像其他编程语言一样，拥有变量、控制、方法等用法。随着项目规模的扩大，由于CSS先天性的不足：无法定义变量、孱弱的计算能力、缺少控制语句、无法继承和模块化等问题，带来的CSS代码中充斥的大量重复定义，代码臃肿庞大，维护会愈加困难。
为了弥补CSS不足，开发者发明了一种对CSS进行预处理的“扩展中间语言”，实现一些编程语言的功能，巧妙的解决了CSS的不足，最后自动化编译成CSS，提高CSS开发效率及可维护性。CSS预处理语言中佼佼者有SASS/SCSS、LESS和STYLUS。本篇主要介绍SASS/SCSS。
SASS/SCSS是什么？
在Sass中文网上我们可以看到其slogan：SASS世界上最成熟、稳定和强大的CSS扩展语言。
SASS采用Ruby语言开发，诞生于2007年，是最早的CSS预处理语言。在其前几代的版本中强制编码风格，使用缩进式风格，重要的是无法兼容已有的CSS代码，所以在早期普及性不如LESS。
SASS从第三代开始，对以上问题进行了改进，完全兼容普通的CSS代码，所以SASS也被成为SCSS，日常开发中，主要使用SCSS。
虽然其使用Ruby语言，但是SASS开发不需要我们掌握Ruby语言，但是使用的话，需要安装Ruby环境。
SASS的安装与使用
SASS安装分成两步，首先是需要安装Ruby，然后使用gem命令 gem install sass安装，为了节省篇幅，不再赘述。
本篇推荐使用HbulderX编辑器来使用SASS，步骤如下：
SCSS/SASS插件安装
依图所示，在HbuliderX中依次打开工具，插件安装，安装SCSS/SASS编译插件。
SCSS/SASS使用
我们在HbuliderX中，创建一个HTML普通项目，在index.html中，编写以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<span class="title">掘金- 代码不止,掘金不停</span>
<div class="intro">掘金是面向全球中文开发者的技术内容分享与交流平台。</div>
</div>
</body>
</html>
index.html定义了一个content类名的div，并引入了style.css样式表，接下来，我们在根目录下创建一个style.scss文件，写上以下代码：
$color1: #ff5500;
$color2: #5555ff;
.content {
.title {
color:$color1
}
.intro {
color:$color2
}
}
上面代码使用了scss的特性，变量和嵌套。
在项目管理器的style.scss上右键依次选择->外部命令->SCSS/SASS编译，系统就会自动同目录下生成style.css，css标签颜色代码就会应用到html中了。
编译成功，控制台会输出以下语句：
[编译scss/sass] 15:53:08.917 Rendering Complete, saving .css file...
[编译scss/sass] 15:53:08.917 Wrote CSS to E:\code\sass\style.css
编译后的style.css：
.content .title {
color: #ff5500;
}
.content .intro {
color: #5555ff;
}
Html页面效果：
亦可开启SASS自动编译，操作如下：依次打开工具->外部命令插件配置->compile-node-sass->package.json文件，将"onDidSaveExecution"值修改为true。这样当我们保存.scss文件时，系统自动编程生成对应css文件。
接下来，我们逐一学习SCSS的的功能。
SCSS变量
SCSS定义变量与PHP一样，使用$美元符号作为关键字，例如：
$color1: #ff5500;
$color2: #5555ff;
div {
color:$color1;
background-color:$color2
}
变量还可以使用#{}嵌套在字符串中：
/* SCSS */
$postion:top;
.content {
margin-#{$postion}: 30px;
}
/* CSS 编译后 */
.content {
margin-top: 30px;
}
SCSS嵌套
SCSS嵌套，是提高生产力的利器！
开头的例子中，我们使用一条嵌套语法完成了原CSS中需要写两条的代码，节省了代码量：
/* SCSS */
.content {
.title {
color:$color1
}
.intro {
color:$color2
}
}
/* CSS 编译后 */
.content .title {
color: #ff5500;
}
.content .intro {
color: #5555ff;
}
嵌套写法，支持多级嵌套，支持各种CSS选择器，例如：
// 二级嵌套，使用span标签选择器
$color1: #ff5500;
$color2: #5555ff;
.content {
.title {
color:$color1;
}
.intro {
color:$color2;
span {
font-weight: 700;
color: #aa5500;
}
}
}
注意如果是伪类选择器，嵌套时，需要使用到&父选择器，例如span的hover：
$color1: #ff5500;
$color2: #5555ff;
.content {
.title {
color:$color1;
}
.intro {
color:$color2;
span {
&:hover {
color: blue;
}
font-weight: 700;
color: #aa5500;
}
}
}
SCSS计算
SCSS支持在代码中使用算式计算：
/* SCSS */
.content {
width: 200px+100px;
height: 30px * 3;
border: 1px solid red;
margin-top: $right * 0.1;
}
/* CSS 编译后 */
.content {
width: 300px;
height: 90px;
border: 1px solid red;
margin-top: 80px;
}
