【SASS/SCSS（一）】选择器

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式。

而SCSS是SASS引入的语法，是CSS的超集，所以所有CSS有效的使用在SCSS中都生效

一、回顾CSS选择器

• 通用选择器 *
• 元素选择器
• 类选择器，.className
• ID选择器，#id
• 属性选择器，对元素中某个属性的值进行筛选，语法有：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
• 逗号分隔的选择器列表
• 空格代表的后代选择器
• > 代表的直接后代选择器
• ~ 代表所有后面的兄弟节点选择器
• + 代表后面直接跟着的第一个兄弟节点选择器
• || 列组合器，例如 col || td代表<col>该列域下的所有td结点
• 伪类/伪元素选择器

具体参见MDN文档：

CSS 选择器 - CSS：层叠样式表 | MDN (mozilla.org)

二、SCSS利用嵌套语法实现选择器

SCSS为了优化CSS的语法表达，使其更简洁、避免重复定义样式，因此实现了嵌套语法来对元素进行选择。例如：

//对ul中的直接后代进行筛选，定制了直接后代中li的样式
ul > {
  li {
    list-style-type: none;
  }
}


//h2选择紧邻兄弟p元素
h2 {
  + p {
    border-top: 1px solid gray;
  }
}

//p元素的所有一般兄弟元素中，选择出span / h1定制样式
p {
  ~ {
    span {
      opacity: 0.8;
    },
    h1 {
      color: red;
    }
  }
}

由于嵌套语法，父选择器的很多属性可以不被反复定义，同时使得选择器的实现更直观、更灵活

三、父选择器

Sass中利用 & 来指示父选择器，这样在嵌套语法中，可以更方便地复用父选择器

同时，还可以在父选择器的基础上添加后缀，寻找基于父选择器命名的子元素

但是添加后缀时，父选择器必须是字母/数字结尾的（例如以 ID 、className、元素标签定义的父类），才可以添加后缀

.alert {

  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;

  //定义该元素伪类的CSS
  &:hover {
    font-weight: bold;
  }

  //添加后缀
  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;

  &--open {
      display: block;
    }
  }
 

}