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的语法表达,使其更简洁、避免重复定义样式,因此实现了嵌套语法来对元素进行选择。例如:
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、元素标签定义的父类),才可以添加后缀
css
.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;
}
}
}
嵌套语法需要区分的部分!构成父子关系的选择器 以及 只是复用名称的选择器!
css
//SASS
.btn {
color: red;
//后代选择器
a{
color:white;
}
//复用的时候要自己再构造一遍需要的后代选择器
& &-item{
color:purple;
}
//平级,只是名称做了复用
&-item {
color: black;
&-green {
color: green
}
}
}
//等价CSS
.btn {
color: red;
}
.btn a {
color: white;
}
.btn .btn-item {
color: purple;
}
.btn-item {
color: black;
}
.btn-item-green {
color: green;
}
如果基于选择器列表,& 获取父选择器代表什么呢?
&可以理解为所有父级选择器结构的引用,举几个例子,看看SASS该写法下css的等价内容:
1、
css
//scss
.main aside:hover,
.sidebar p {
parent-selector: &;
// => ((unquote(".main") unquote("aside:hover")),
// (unquote(".sidebar") unquote("p")))
}
//等价css
.main aside:hover,
.sidebar p {
parent-selector: .main aside:hover, .sidebar p;
}
2、
css
//scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
//css
ul, ol {
text-align: left;
}
ul ul, ol ol {
padding-bottom: 0;
padding-left: 0;
}
在这个例子中值得注意的是,有相同前缀的css属性例如padding-*、margin-*等,可以在书写时以嵌套语法的形式拆分
3、如果父选择器是类选择器,可以利用其构造新的选择器,并提取到顶层
css
//scss
.selector {
color: blue;
//利用表达式的写法构造
@at-root #{a + &} {
color: red;
}
}
//等价css
.selector {
color: blue;
}
a.selector {
color: red;
}