11 SASS/SCSS基础语法之选择器解析

在前一篇中，我们讨论了 SASS/SCSS 的注释使用方法，这为我们后续的代码组织和可读性打下了良好的基础。在这一篇中，我们将深入探讨 SASS/SCSS 的选择器解析，这将帮助我们更好地理解如何在样式表中选择元素以及如何组织这些选择器。

选择器的概念

在 CSS 中，选择器用于选择要应用样式的元素。SASS/SCSS 作为 CSS 的预处理器，增强了选择器的灵活性和可读性。我们可以使用多种选择器，包括类选择器、ID选择器、元素选择器等，而 SASS/SCSS 还引入了更强大的选择器嵌套和继承特性。

简单选择器

在 SCSS 中，可以像普通 CSS 一样使用简单的选择器。例如：

.button {
  background-color: blue;
  color: white;
}

上述代码定义了一个类选择器 .button，它会将背景色设为蓝色，文字颜色设为白色。

嵌套选择器

SASS/SCSS 最吸引人的特性之一，是它支持选择器的嵌套。这使得我们可以将层级关系反映在样式文件中，逻辑更加清晰。使用嵌套时，可以不需要重复书写父选择器。例如：

.nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
  }
}

在这个例子中，.nav 是父选择器，ul、li 和 a 都是嵌套的子选择器。这种方式不仅使代码更加整洁，还确保了可读性。

父选择器 &

在 SCSS 中，& 符号代表父选择器的引用，这样可以在嵌套的选择器中定义更复杂的样式。例如：

.button {
  color: white;
  &:hover {
    background-color: darkblue;
  }
  &.active {
    background-color: blue;
  }
}

在上述代码中，:hover 和 .active 的选择器是相对于 .button 的。当鼠标悬停在按钮上时，背景色会变成深蓝色；当按钮处于活动状态时，背景色保持蓝色。

组合选择器

SCSS 还允许我们定义组合选择器，组合多个选择器的样式。例如：

.btn, .link {
  padding: 10px;
  border-radius: 5px;
}

这个例子中，.btn 和 .link 两个类的样式相同，共享了 padding 和 border-radius 的属性。通过组合选择器，代码更加简洁明了。

继承选择器

SASS/SCSS 还支持选择器的继承，这样便于在多个选择器之间共享样式。使用 @extend 关键字可以实现这一点：

.message {
  padding: 10px;
  border: 1px solid #ccc;
}

.success {
  @extend .message;
  background-color: green;
  color: white;
}

.error {
  @extend .message;
  background-color: red;
  color: white;
}

在这个示例中，.success 和 .error 类都继承了 .message 类的样式。这大大减少了代码的重复，促进了样式的复用。

小结

在本篇中，我们详细介绍了 SASS/SCSS 中的选择器解析，包括简单选择器、嵌套选择器、父选择器 &、组合选择器和继承选择器等。这些特性使得我们能够更加高效地编写样式，使 CSS 代码更具可读性和可维护性。

在下一篇中，我们将讨论 SASS/SCSS 的编译与输出方式，让我们深入了解如何将编写的 SCSS 文件转换为可供浏览器使用的 CSS 文件，敬请期待！