Sass - CSS 扩展

Sass - CSS 扩展特性

Sass 扩展了标准 CSS 语法，增加了几个特性，使得样式编写更加直观、有组织且减少重复。这些扩展特性与熟悉的 CSS 概念无缝集成。

1. 嵌套规则

嵌套规则也许是 Sass 最具标志性的特性，它允许你将 CSS 规则写在彼此内部，从而反映 HTML 的结构。这减少了重复父选择器的需要。

SCSS 示例：

nav {
  background-color: #f8f9fa;
  padding: 0.5rem 1rem;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  li {
    margin-right: 1rem;
  }

  a {
    text-decoration: none;
    color: #007bff;

    &:hover {
      color: #0056b3;
    }
  }
}

编译后的 CSS 输出：

nav {
  background-color: #f8f9fa;
  padding: 0.5rem 1rem;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
nav li {
  margin-right: 1rem;
}
nav a {
  text-decoration: none;
  color: #007bff;
}
nav a:hover {
  color: #0056b3;
}

注意： 避免嵌套过深（超过 3-4 层）。过度嵌套会导致选择器过于具体，难以覆盖，并增加 CSS 文件大小。

2. 引用父选择器 (&)

在嵌套规则内部，& 符号 (&) 用作整个父选择器链的占位符。它对于以下情况至关重要：

• 伪类和伪元素： 将 :hover、:focus、::before、::after 等附加到父元素上。
• 修饰符类 (BEM 风格)： 创建 .block__element--modifier 等变体。
• 上下文样式： 当内部满足特定子元素或条件时，为父元素本身设置样式。

SCSS 示例：

.button {
  padding: 10px 15px;
  border: 1px solid #ccc;

  // 伪类
  &:hover {
    background-color: #eee;
  }

  // BEM 修饰符
  &--primary {
    background-color: blue;
    color: white;
    border-color: blue;
  }

  // 上下文：当 .button 在 .container 内部时设置样式
  .container & {
     margin-bottom: 20px;
  }

  // 后缀
  &-icon {
    // 创建 .button-icon
    margin-right: 5px;
  }
}

3. 嵌套属性

Sass 允许你将具有相同前缀（命名空间）的属性（如 font、background、border 等）分组。这可以改进具有多个子属性的属性的组织结构。

SCSS 示例：

.element {
  font: {
    family: 'Arial', sans-serif;
    size: 1.2rem;
    weight: bold;
    style: italic;
  }

  border: 1px solid #ccc {
    left: none;
    radius: 5px;
  }

  // 等同于:
  // font-family: 'Arial', sans-serif;
  // font-size: 1.2rem;
  // font-weight: bold;
  // font-style: italic;
  // border: 1px solid #ccc; /* 这会覆盖下面的嵌套 border 属性 */
  // border-left: none;
  // border-radius: 5px;
}

注意： 尽管可以使用，但嵌套属性的使用不如嵌套规则普遍。请注意，在嵌套中设置简写属性（如 font: ... 或 border: ...）可能会根据 CSS 层叠规则覆盖嵌套的子属性。它通常只提供微小的可读性益处。

4. 占位符选择器 (%)

占位符选择器以 % 开头，其行为类似于类，但它们不会输出到最终的 CSS 中，除非使用 @extend 指令进行扩展。它们专门设计用于作为继承的基础样式，防止未使用的工具类使 CSS 输出变得混乱。

SCSS 示例：

// 定义一个不输出的占位符用于共享的 alert 样式
%alert-base {
  padding: 15px;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-success {
  @extend %alert-base;
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-danger {
  @extend %alert-base;
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

编译后的 CSS 输出：

.alert-success, .alert-danger {
  padding: 15px;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

在相关组件之间共享具体样式规则时，使用 %placeholder 结合 @extend 通常被认为是最佳实践。