前端开发中，SASS 和 SCSS 作为两种常用的 CSS 预处理器，很可能会让新手产生疑惑，这两种预处理器有什么区别？应该如何使用？本文将详细介绍 SASS 和 SCSS 的区别和联系，并提供相应代码示例。
SASS 与 SCSS 的区别
SASS 和 SCSS 的本质上是同一种东西，都属于 CSS 预处理器，不同的是他们的语法风格不同。
SASS 最开始采用的是基于缩进的语法格式，例如：
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
至于 SCSS 最开始的格式是基于 CSS 语法的扩展，意味着任意有效的 CSS 代码都可以是 SCSS 代码，然后再扩展一些 SASS 所没有的特性，例如：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}因为 SCSS 的语法具有 CSS 的相似性，使得许多人更容易切换到预处理器。此外，根据调查，SCSS 比 SASS 更受欢迎。
SCSS 的基本用法
接下来，我们将向大家介绍基于 SCSS 语法的基本使用方法。
变量
在 SCSS 中，你可以通过 $ 符号来定义变量，例如：
$primary-color: #333;
body {
color: $primary-color;
}嵌套
嵌套是 SCSS 的一个很好的特性，通过选择器的嵌套，可以节省代码并且更易于阅读。
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
------- - -----
-
-
-继承
SCSS 允许使用 @extend 通过一个选择器中继承样式规则并将它们应用于另一个选择器。
-- -------------------- ---- -------
---- -
-------- -------------
-------- --- -----
---------- -----
------------ -----
------ -----
----------- -------
------------ - --- --- ---------------
--------------- -------
------- --------
----------------- --------
----------------- ---------------------------------------
----------------- ------------------------- --- -----------------------------------------------
----------------- ------------------------------------------
----------------- -------------------------------------
----------------- ------------------ ---------------------
------------------ ---------
------- --- ----- -----
------------- ------- ------- --------
-------------------- --------
---------------------- ----
------------------- ----
-------------- ----
-------- --
---------------------------------------------------------------------------- ------------------------ ---------------
-----------------------------------------------------------------
--------- -
----------------- --------
----------------- ------------------------------------------
----------------- ------------------------- --- --------------------------------------------------
----------------- ---------------------------------------------
----------------- ----------------------------------------
----------------- ------------------ ------------------------
------------------ ---------
------------- ------- ------- --------
-------------------- --------
------ -----
------------ - ---- - ----------------
------- ----------- ------
------- ----------- ------
-
--------- -
----------------- --------
----------------- ------------------------------------------
----------------- ------------------------- --- --------------------------------------------------
----------------- ---------------------------------------------
----------------- ----------------------------------------
----------------- ------------------ ------------------------
------------------ ---------
------------- ------- ------- --------
-------------------- --------
------ -----
------------ - ---- - ---------------
------- ----------- ------
------- ----------- ------
-
-mixin
Mixin 允许你声明一组 CSS 的属性，可以随时在你的样式表的任何地方调用它。Mixin 接收参数，使得更容易的根据函数的需求而进行修改。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }总结
SASS 和 SCSS 是两种常见的 CSS 预处理器，虽然语法风格不同，但本质上属于同一种东西。SCSS 更受欢迎也更易于学习与使用。
在 SCSS 中， 变量、嵌套，继承，mixin 是四个比较常用的特性。
期望阅读本文的读者能够更好地理解和掌握 SASS 和 SCSS 的相关知识，通过合理地应用这些特性来写出可维护、易读且高效的 CSS 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1b8daf6b2d6eab3cec3c5