SASS 选择器功能

SASS 是一种 CSS 预处理器，它扩展了 CSS 语言，使其具有更多的功能和特性。其中一个关键的功能是选择器功能，它使得定义 CSS 样式更加灵活和方便。

基本选择器

SASS 支持所有 CSS 的基本选择器，包括：

• 类选择器 .class
• ID 选择器 #id
• 标签选择器 tag

属性选择器

SASS 还支持属性选择器，可以根据 HTML 元素的属性来选择对应的样式，例如：

input[type="text"] {
  border: 1px solid #ccc;
}
button[disabled] {
  cursor: not-allowed;
}

在上面的例子中，当文本框的 type 属性为 text 时，将给文本框添加一个灰色的边框；当按钮的 disabled 属性存在时，将改变光标样式为不可用状态。

伪类选择器

SASS 支持所有 CSS 的伪类选择器，例如：

a:hover {
  color: red;
}
li:first-child {
  font-weight: bold;
}

在上面的例子中，当鼠标悬停在链接上时，将改变文字颜色为红色；当列表项为其父元素的第一个子元素时，将改变字体粗细。

父级选择器

SASS 还支持父级选择器，可以根据 HTML 结构中的关系来定义样式，例如：

.container {
  padding: 10px;
  background-color: #fff;
  .box {
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #eee;
    &:hover {
      background-color: #ddd;
    }
  }
}

在上面的例子中，当鼠标悬停在 .box 元素上时，将给其添加一个深灰色背景。

子元素选择器

SASS 还支持子元素选择器，可以根据 HTML 结构中的父子关系来定义样式，例如：

ul {
  padding: 0;
  list-style: none;
  li {
    display: inline-block;
    a {
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      color: #333;
      &:hover {
        color: #fff;
        background-color: #333;
      }
    }
  }
}

在上面的例子中，当鼠标悬停在链接上时，将给其添加一个白色的背景和蓝色的文字；同时，在父元素为 ul 的列表中，将所有列表项设置为水平排列。

mixin 选择器

SASS 还支持 mixin 选择器，可以将一段样式代码封装成 mixin 进行重复使用，例如：

@mixin button($bg, $color) {
  display: inline-block;
  padding: 10px 20px;
  background-color: $bg;
  color: $color;
  border-radius: 5px;
  text-decoration: none;
  &:hover {
    background-color: darken($bg, 5%);
  }
}

.btn-primary {
  @include button(#007bff, #fff);
}

.btn-danger {
  @include button(#dc3545, #fff);
}

在上面的例子中，定义了一个名为 button 的 mixin，可以接受两个参数 $bg 和 $color，分别表示按钮的背景颜色和字体颜色，然后在 .btn-primary 和 .btn-danger 类中分别调用 button mixin，从而生成不同样式的按钮。

总结

以上就是常用的 SASS 选择器功能，它们使得 CSS 样式的定义更加灵活、简洁和可维护性，有助于提高 Web 应用程序的开发效率。