?是对 CSS 的扩展，可以编译成传统CSS，供浏览器使用。使用 Sass 是为了解决在大型项目中传统CSS会遇到的重复、可维护性差等问题。Sass 新增了nested rules（嵌套规则）, variables（变量）, mixins（混入）, selector inheritance（选择器继承）等特性。
使用 Sass 优点：
- 简单简洁
- 语义化（expressive）
- 重复使用性好（reusable）
- 可维护性和扩展性好
Sass 的语法分为：
- 新的SCSS ?(
Sassy CSS、Sass 3，扩展名为*.scss)； - 旧的SASS ?( 学习
Haml，具备不使用大括弧格式、使用缩排，不能直接使用CSS语法、学习曲线较高等特性，扩展名为*.sass)；
关于两者比较的补充可以参考这篇文章?
由于新的 SCSS 语法是 CSS3 的超集合，所以传统的 CSS3 档案就算直接复制过来也不会出错，学习曲线相对较缓，因此对于Tian开发工程师来说推荐使用SCSS语法。
为了方便演示，你可以将示例代码直接在线转译：
本教程仅供入门学习，如果你想完整学习Sass，或者你的团队，你的项目中正在Sass，建议你查看完整的Sass文档：https://www.7psus5.com/doc/sass/
使用Sass
在开始介绍Sass特性之前，我们先来学习如何将 Sass 转译成 CSS 。
首先，按官网说明?，接下来在一个文件中创建一个main.scss文件，内容如下：
// 引用
@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:
h1 {
font-family: Roboto, sans-serif;
text-align: center;
}
.banner {
font-family: 'Pacifico', cursive;
height: 400px;
background-image: url("lemonade.jpg");
}
.container {
text-align: center;
font-family: 'Pacifico', cursive;
}
在命令行工具下执行以下命令进行转译：
// sass 指令 将要转译的文件名 输出的文件名 sass main.scss main.css
此时你就会看到文件夹中多了 main.css 和 main.css.map 两个文件。
main.css文件：转译过后的CSS文件，不多解释。main.css.map文件：是一个Source Map文件，用于浏览器调试工具调试代码，比如使用Chrome开发者工具调试页面时，将直接显示原始Sass 代码，而不是转译后的 CSS 代码。了解Source Map请查看下面两篇文章：
更多Sass使用说明请查看：https://www.7psus5.com/doc/sass/#using-sass
Variables（变量）
变量可以用来储存值，可以增加重用性。在 Sass 中我们使用`$`来表示变量，变量类型可以是 Numbers（可以有单位或无单位）、Strings、Booleans、null值（视为空值），甚至可以使用 Lists、Maps。变量的使用：
$translucent-white: rgba(255,255,255,0.3);
p {
background-color: $translucent-white;
}
Lists 类型的值可以用空格或加逗号分隔，Maps代表一个键和值对集合，键用于查找值。和 Lists 不同，Maps必须始终使用括号括起来，并且必须用逗号分隔。：
$font-style-2: Helvetica, Arial, sans-serif;
$standard-border: 4px solid black;
p {
border: $standard-border;
}
// maps key:value
$font-style-2: (key1: value1, key2: value2);
Nesting（嵌套）
Sass 允许将一个 CSS 样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内，可以理解为层级选择器，有助于降低父元素重复性。转译前：
.parent {
color: blue;
.child {
font-size: 12px;
}
}
转译后：
.parent {
color: blue;
}
.parent .child {
font-size: 12px;
}
有些时候需要直接使用嵌套外层的父选择器，这个时候需要使用&（了解引用父选择器:&）。例如:
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
转译后：
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
嵌套不仅只用于子选择器上，还可以使用在同一个命名空间中的属性上，例如：
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
转译后：
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
Mixins（混入）
混入(mixin)允许您定义可以在整个样式表中重复使用的样式，从而避免了使用无语意的类（class），比如 .float-left。混入(mixin)还可以包含所有的CSS规则，以及任何其他在Sass文档中被允许使用的东西。他们甚至可以带参数，引入变量，只需少量的混入(mixin)代码就能输出多样化的样式。
定义的混入@mixin 使用 @include 引用。
简单的例子：
//定义一个mixin
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
//引用mixin
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
转译后：
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
}
再来举一个最常见的例子，比如给属性加上跨浏览器的前缀，这里我们使用了一个参数$radius。例如：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
转译后：
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
参数还可以使用默认值，对上面的例子稍作修改：
@mixin border-radius($radius:10px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box1 { @include border-radius(); }
.box2 { @include border-radius(20px); }
转译后：
.box1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.box2 {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
border-radius: 20px;
}
有时我们也需要处理参数复杂的情形，此时可以使用 Lists、Maps 类型来辅助，例如：
// 定义一个混入，用于定义线性渐变
@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
background: repeating-linear-gradient(
$direction,
$stripe-background,
$stripe-background ($width-percent - 1),
$stripe-color 1%,
$stripe-background $width-percent
);
}
// 定义一个map，作为混入参数
$college-ruled-style: (
direction: to bottom,
width-percent: 15%,
stripe-color: blue,
stripe-background: white
);
// 通过map类型作为参数，引用混入。
.definition {
width: 100%;
height: 100%;
@include stripes( $college-ruled-style ... );
}
这里有需要注意一个地方，这里的参数是一个可变参数，参数后面需要跟...进行传递（什么是可变参数）。转译后：
.definition {
width: 100%;
height: 100%;
background: repeating-linear-gradient(to bottom, white, white 14%, blue 1%, white 15%);
}
还有种情况是参数当作字串传入（或者字符串插值），说的通俗一点就是带引号的字符串将被编译为不带引号的字符串，需要使用#{}插值，例如：
// 使用 #{$file} 接收
@mixin photo-content($file) {
content: url(#{$file}.jpg); //string interpolation
object-fit: cover;
}
.photo {
@include photo-content('titanosaur');
width: 60%;
margin: 0px auto;
}
转译后：
.photo {
content: url(titanosaur.jpg);
object-fit: cover;
width: 60%;
margin: 0px auto;
}
混入中也可以使用嵌套：
@mixin hover-color($color) {
&:hover {
color: $color;
}
}
.word {
@include hover-color(red);
}
转译后：
.word:hover {
color: red;
}
Functions（函数）
Sass内置了一些好用函数可以简单设定色相、渐变等，例如：adjust-hue($color, $degrees)、fade-out：
更多内置函数的列表请查看
Operations（运算）
通过加减乘除和取余等运算符可以方便运算所需的属性值。Sass 支持数字标准的算术运算（加法+，减法- ，乘法*，除法/和取模%）。Sass 数学函数在算术运算期间会保留单位。数字类型支持关系运算符(<, >, <=, >=)，并且所有类型支持相等运算符(==, !=)。
比如颜色运算：
p {
color: #010203 + #040506;
}
计算 01 + 04 = 05, 02 + 05 = 07, 和 03 + 06 = 09，并且转译为：
p {
color: #050709; }
除法 / 使用上需要注意：
p {
font: 10px/8px; // 原生的CSS，不作为除法
$width: 1000px;
width: $width/2; // 使用了变量, 作为除法
width: round(1.5)/2; // 使用了函数, 作为除法
height: (500px/2); // 使用了括号, 作为除法
margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}
转译为：
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px; }
也可以使用@each语法迭代list内容：
$list: (orange, purple, teal);
@each $item in $list {
.#{$item} {
background: $item;
}
}
这里再次提醒一下，参数当作字串传入时需要使用#{}插值。编译后：
.orange {
background: orange;
}
.purple {
background: purple;
}
.teal {
background: teal;
}
使用@for迭代，并加入条件判断：
$total:3;
$step :2;
@for $i from 1 through $total {
.ray:nth-child(#{$i}) {
background: adjust-hue(blue, $i * $step);
// if()函数
width: if($i % 2 == 0, 300px, 350px);
margin-left: if($i % 2 == 0, 0px, 50px);
}
}
编译后：
.ray:nth-child(1) {
background: #0900ff;
width: 350px;
margin-left: 50px;
}
.ray:nth-child(2) {
background: #1100ff;
width: 300px;
margin-left: 0px;
}
.ray:nth-child(3) {
background: #1a00ff;
width: 350px;
margin-left: 50px;
}
这里还有一个就是if()函数，第1个参数是判断条件，第2个参数是判断条件为true时返回的值，第3个参数是判断条件为false时返回的值。
@import 引用
可以引入其他 Sass、SCSS 文件。我们通常使用Partials去处理特定功能，方便管理和维护。以下是引用_variables.scss文件的范例，其中文件名前的_表示引用前要先编译：
@import "variables";
@extend（扩展）
当一个样式类（class）含有另一个类的所有样式，并且它有自己的特定样式的时候可以使用 @extend 。例如，编译前：
.lemonade {
border: 1px yellow;
background-color: #fdd;
}
.strawberry {
@extend .lemonade;
border-color: pink;
}
转译后：
.lemonade, .strawberry {
border: 1px yellow;
background-color: #fdd;
}
.strawberry {
border-color: pink;
}
搭配占位符（Placeholders） 使用，转译前：
$lemon-yellow : red;
a%drink {
font-size: 2em;
background-color: $lemon-yellow;
}
.lemonade {
@extend %drink;
font-size: 1.5em;
}
转译后：
a.lemonade {
font-size: 2em;
background-color: red;
}
.lemonade {
font-size: 1.5em;
}
@mixin和@extend比较，转译前：
@mixin no-variable {
font-size: 12px;
color: #FFF;
opacity: .9;
}
%placeholder {
font-size: 12px;
color: #FFF;
opacity: .9;
}
span {
@extend %placeholder;
}
div {
@extend %placeholder;
}
p {
@include no-variable;
}
h1 {
@include no-variable;
}
转译后：
span, div {
font-size: 12px;
color: #FFF;
opacity: .9;
}
p {
font-size: 12px;
color: #FFF;
opacity: .9;
}
h1 {
font-size: 12px;
color: #FFF;
opacity: .9;
}
总结
以上就是 Sass/SCSS 最简单最基础也是最常用的入门教程，在这篇文章中我们大致上介绍了 Sass 使用语法。除了 Sass 外，目前还有许多 CSS 扩展，包括语法较易学的、组件化化思考的 CSS in JS、主要解决全域问题和模块引用的，取经于JavaScript Task Runner的、网格样式表单等等，这些最终目的都是为了解决传统CSS维护不易、重用性低等问题。事实上，有些人觉得使用 CSS 预处理器比较容易维护，有些人认为每次都要编译很麻烦，至于要选择哪一种 CSS 预处理器 或是根本不使用，取决于团队的内部规范和讨论。俗话说后端一天，Tian一年，说不定现在选边站的技术，下个月就不流行了呢。
test 2周前 (12-26)说：
龙 3周前 (12-22)说：
leec 3周前 (12-19)说：
yazaky 3周前 (12-17)说：
zhou 4周前 (12-14)说：
一了个头 4周前 (12-14)说：
很简单实用的一篇教程，点个赞。