SASS 中父级选择器的使用技巧

SASS 中父级选择器的使用技巧

SASS 是一个 CSS 预处理器，以其嵌套、变量、混合和继承等特性而著称。其中父级选择器是一个非常有用和强大的功能，可以当作生成类和修改类的一种方式。

一、父级选择器的基本语法

在 SASS 中，通过符号 "&" 表示父级选择器。 在下面的例子中， "&" 表示父元素或父选择器，"." 表示子元素或子选择器。

// javascriptcn.com 代码示例
.parent {
  font-size: 16px;
  .child {
     color: red;
     &:hover {
        background-color: blue;
     }
  }
}

上述代码会被编译为以下 CSS 代码：

// javascriptcn.com 代码示例
.parent {
  font-size: 16px;
}
.parent .child {
  color: red;
}
.parent .child:hover {
  background-color: blue;
}

二、使用父级选择器生成类

父级选择器可以结合继承的概念，帮助我们生成类，从而快速地增加样式。

// javascriptcn.com 代码示例
%btn {
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

.btn-primary {
  @extend %btn;
  background-color: blue;
  color: white;
}

.btn-danger {
  @extend %btn;
  background-color: red;
  color: white;
}

上述代码会被编译为以下 CSS 代码：

// javascriptcn.com 代码示例
.btn-primary, .btn-danger {
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

.btn-primary {
  background-color: blue;
  color: white;
}

.btn-danger {
  background-color: red;
  color: white;
}

通过以上代码，我们成功地生成了两个新的类，分别为 .btn-primary 和 .btn-danger。由于我们使用了 %btn 这个占位符，所以不会生成多余的 CSS 代码，达到了省代码的目的。

三、使用父级选择器修改类

父级选择器可以修改类中的属性，达到复用和扩展的目的。

// javascriptcn.com 代码示例
.btn {
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  &.btn-primary {
    background-color: blue;
    color: white;
  }
  &.btn-danger {
    background-color: red;
    color: white;
  }
}

上述代码会被编译为以下 CSS 代码：

// javascriptcn.com 代码示例
.btn {
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}
.btn.btn-primary {
  background-color: blue;
  color: white;
}
.btn.btn-danger {
  background-color: red;
  color: white;
}

通过以上代码，我们成功地修改了 .btn-primary 和 .btn-danger 类中的属性，达到了复用和扩展的目的。

总结

父级选择器是 SASS 中非常有用和强大的功能，可以当作生成类和修改类的一种方式。通过本文的介绍，我们可以掌握如何使用父级选择器生成类和修改类，并可以在实际项目中应用这些技巧。

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