前端开发中，我们经常使用 CSS 来控制网页的样式。但是，随着开发项目越来越大、越来越复杂，CSS 的累积和维护难度也越来越高，因此出现了 SASS 和 SCSS。
SASS 和 SCSS 的介绍
SASS (Syntactically Awesome Style Sheets) 是一种 CSS 预处理器语言，它可以生成标准的 CSS 样式表。SASS 是一种 CSS 的扩展语言，它提供了一些语法糖，如变量、函数、嵌套选择器、继承、混入等等，可以让 CSS 的编写更加方便，代码更加简洁。
SCSS (Sassy CSS) 是 SASS 的一种新的语法形式，它完全兼容 CSS 语法，使用花括号 {} 和分号 ; 来分隔语句，比较容易上手。
SASS 和 SCSS 虽然语法不同，但是它们都可以使用 .scss 后缀名来保存文件，并且 SASS 也可以通过命令行编译成标准的 CSS 样式表。它们最主要的区别在于它们的语法格式和书写风格。
SASS 和 SCSS 的区别
语法格式
SASS 是使用缩进的语法格式，它不使用花括号和分号来分隔语句，而是使用缩进来表示样式层级的关系。比如：
.container
width: 960px
margin: 0 auto
.box
border: 1px solid #cccSCSS 则是使用花括号和分号的语法格式，和 CSS 类似。比如：
.container {
width: 960px;
margin: 0 auto;
.box {
border: 1px solid #ccc;
}
}变量
SASS 和 SCSS 都支持变量的定义和使用。在 SASS 中，变量的定义是使用 $ 符号，比如：
$bgcolor: #f4f4f4; body background-color: $bgcolor;
在 SCSS 中，变量的定义是使用 @ 符号，比如：
$bgcolor: #f4f4f4;
body {
background-color: $bgcolor;
}嵌套选择器
SASS 和 SCSS 都支持嵌套选择器的写法。比如：
.box
width: 100%
height: 200px
&.box-small
height: 100px.box {
width: 100%;
height: 200px;
&.box-small {
height: 100px;
}
}继承
SASS 和 SCSS 都支持样式的继承。比如：
-- -------------------- ---- ------- ---- ------ ----- ----------------- ----- ------- ---- -------- ---- ---- ------------ ---- ---------------- ---- ------------ ------- ---- ----------------- ----
-- -------------------- ---- ------- ---- - ------ ------ ----------------- ------ ------- ----- -------- ---- ----- ------------ ----- ---------------- ----- - ------------ - ------- ----- ----------------- ----- -
混合
SASS 和 SCSS 都支持混合的写法，可以重复使用一个样式块。比如：
-- -------------------- ---- ------- ------ ---------- - -------------- --- ------------------- --- ---------------------- --- - ---- ------ ---- ------- ----- -------- -----------
-- -------------------- ---- ------- ------ ---------- - -------------- --- ------------------- --- ---------------------- --- - ---- - ------ ----- ------- ------ -------- ------------ -
总结
SASS 和 SCSS 都是很好的 CSS 预处理器，它们的区别在于语法格式和书写风格，开发者可以根据自己的喜好和项目需求来选择使用哪一种。不过，在使用 SASS 和 SCSS 时需要注意代码的缩进和语法格式，保证代码的可读性和维护性，这对项目的开发和维护都是非常重要的。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503f32095b1f8cacd0b2c61