在前端开发中，CSS 是必不可少的一部分，但是 CSS 的语法和功能有些局限，不够灵活。为了解决这个问题，Sass 应运而生。Sass 是一种 CSS 预处理器，它可以让我们使用类似编程语言的方式来编写 CSS，使得 CSS 更加强大、灵活、易于维护。
本文将介绍 Sass 的基础知识，包括 CSR、OOCSS、BEM 和 Sass 的独特语法，希望能够帮助读者更好地理解和使用 Sass。
CSR：分离关注点
CSR（Separation of Concerns）是一种设计原则，它的核心思想是将一个系统分解成若干个部分，每个部分只负责一个特定的功能。在前端开发中，我们可以将 CSS 与 HTML、JavaScript 分离开来，这样可以使得代码更加清晰、易于维护。例如，我们可以将 CSS 放在单独的文件中，然后在 HTML 中通过 <link> 标签引入。
OOCSS：面向对象的 CSS
OOCSS（Object Oriented CSS）是一种 CSS 设计模式，它的核心思想是将 CSS 视为对象，使用类似面向对象编程的方式来编写 CSS。OOCSS 可以使得 CSS 更加模块化、可重用，从而使得代码更加易于维护。例如，我们可以将按钮的样式定义为一个类，然后在多个地方重复使用这个类。
-- -------------------- ---- ------- ------- - -------- ------------- -------- ---- ----- ----------------- ----- ------ ----- -------------- ---- - -------------- - ------- -------- ----------------- ----- - -------------- - ------- -------- ----------------- ----- -
上面的代码中，我们定义了一个名为 .button 的类，它包含了按钮的基本样式。然后我们使用 @extend 指令来继承这个类，从而创建了名为 .submit-button 和 .cancel-button 的类，它们分别表示提交按钮和取消按钮，这两个类都继承了 .button 类的样式。
BEM：块、元素、修饰符
BEM（Block Element Modifier）是一种 CSS 命名规范，它的核心思想是将页面分解成若干个块（block），每个块包含若干个元素（element），并且可以通过修饰符（modifier）来改变块或元素的状态。BEM 可以使得 CSS 更加易于维护、扩展，从而使得代码更加健壮。
<div class="button button--large button--primary">Submit</div>
上面的代码中，我们定义了一个名为 .button 的块，它表示一个按钮。然后我们使用 -- 符号来表示修饰符，从而创建了名为 .button--large 和 .button--primary 的修饰符，它们分别表示大号按钮和主要按钮。
-- -------------------- ---- -------
------- -
-------- -------------
-------- ---- -----
-------------- ----
-------- -
---------- -----
-------- ---- -----
-
---------- -
----------------- -----
------ -----
-
-上面的代码中，我们使用 & 符号来表示父选择器，从而创建了名为 .button--large 和 .button--primary 的修饰符，它们都继承了 .button 块的样式，并且添加了自己的样式。
Sass 的独特语法
Sass 的语法比 CSS 更加灵活、强大，它支持变量、函数、嵌套、继承等等功能。下面是一些 Sass 的独特语法：
变量
Sass 支持变量，可以使用 $ 符号来定义变量。
$primary-color: #f00;
.button {
background-color: $primary-color;
}上面的代码中，我们定义了一个名为 $primary-color 的变量，它表示主要颜色。然后我们在 .button 类中使用了这个变量，从而使得按钮的背景颜色为主要颜色。
嵌套
Sass 支持嵌套，可以使用 & 符号来表示父选择器。
.button {
display: inline-block;
padding: 10px 20px;
&:hover {
background-color: #ccc;
}
}上面的代码中，我们使用 & 符号来表示父选择器，从而创建了一个名为 :hover 的伪类选择器，它表示鼠标悬停时的样式。
继承
Sass 支持继承，可以使用 @extend 指令来继承已有的类。
-- -------------------- ---- ------- ------- - -------- ------------- -------- ---- ----- ----------------- ----- ------ ----- -------------- ---- - -------------- - ------- -------- ----------------- ----- - -------------- - ------- -------- ----------------- ----- -
上面的代码中，我们使用 @extend 指令来继承已有的类，从而创建了名为 .submit-button 和 .cancel-button 的类，它们都继承了 .button 类的样式，并且添加了自己的样式。
总结
本文介绍了 Sass 的基础知识，包括 CSR、OOCSS、BEM 和 Sass 的独特语法。这些知识对于前端开发非常重要，可以使得 CSS 更加灵活、强大、易于维护。希望读者能够认真学习这些知识，并且在实际开发中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c2777badd4f0e0ffc56f8e