Sass 基础篇：CSR、OOCSS、BEM 以及 Sass 的独特语法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，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 {
  display: inline-block;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
}

.submit-button {
  @extend .button;
  background-color: #f00;
}

.cancel-button {
  @extend .button;
  background-color: #ccc;
}

上面的代码中，我们定义了一个名为 .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 {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  
  &--large {
    font-size: 20px;
    padding: 20px 40px;
  }
  
  &--primary {
    background-color: #f00;
    color: #fff;
  }
}

上面的代码中，我们使用 & 符号来表示父选择器，从而创建了名为 .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 指令来继承已有的类。

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
}

.submit-button {
  @extend .button;
  background-color: #f00;
}

.cancel-button {
  @extend .button;
  background-color: #ccc;
}

上面的代码中，我们使用 @extend 指令来继承已有的类，从而创建了名为 .submit-button 和 .cancel-button 的类，它们都继承了 .button 类的样式，并且添加了自己的样式。

总结

本文介绍了 Sass 的基础知识，包括 CSR、OOCSS、BEM 和 Sass 的独特语法。这些知识对于前端开发非常重要，可以使得 CSS 更加灵活、强大、易于维护。希望读者能够认真学习这些知识，并且在实际开发中加以应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c2777badd4f0e0ffc56f8e