适用场景

1. 场景

使css分组选择器更加合理
- 可以往分组选择器内嵌套选择器, 可以实现括号调整符号组合优先级的效果

1.1. 选择器嵌套

css中重复写选择器是非常恼人的。尤其是html结构嵌套非常深的时候，scss的选择器嵌套可以避免重复输入父选择器，可以有效的提高开发效率，减少样式覆盖可能造成的异常问题。这也是我们最常用的功能。很多人用scss就只用了这个功能，然后觉得自己会了🤜🤜。

1. 实例

1.1. 实例之一

这个是正常的css结构

.container {
    width: 1200px;
    margin: 0 auto;
}
.container .header .img {
    width: 100px;
    height: 60px;
}

编译成scss的样子，子元素向父元素内部嵌套了。

.container {
    width: 1200px;
    margin: 0 auto;
    .header {
        .img {
            width: 100px;
            height: 60px;
        }
    }
}

1.2. 实例之一

.a,.b{
	div{
		width:100px;
	}
}

编译为css:

.a div,.b div{
	width:100px;
}

1.2. 属性嵌套

有些css属性遵循相同的命名空间 (相同的开头)，比如font-family，font-size，font-weight都以font作为属性的命名空间。为了便于管理这样的属性，也为了避免重复输入。（这个编辑器提示有点不太理想……，不是很好用）。

.container {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译成css

.container {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

命名空间也可以包含自己的属性值

.container {
  color: red {
    adjust: fantasy;
  }
}

编译成css

.container {
  color: red;
  color-adjust: fantasy;
}

0.1. 父选择器&

在嵌套 css规则时，有时会需要使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用& 代表嵌套规则外层的父选择器，scss在编译时会把&替换成父选择器名。案例里面的&表示的就是父级a选择器

.container {
    a {
        color: #333;
        /* 使用&的选择器将会提升一个层级
        即从 .container a &:hover 变为:
             .container a:hover */
        &:hover {
             text-decoration: underline;
             color: #f00;
        }
    }
}

转化成css

.container a {
    color:#333;
}
.container a:hover {
    text-decoration:underline;
    color:#F00;
}

换个思路，也可以使用&进行选择器名称拼接。

.main {
    color: black;
    &-sidebar { border: 1px solid; }
}

转化成css

.main {
    color: black;
}
.main-sidebar {
    border: 1px solid;
}

@media嵌套

1. 嵌套在css样式中

如果@media 嵌套在 css规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。
1. 这个让 @media 方便不少，不需要重复写选择器，也不会打乱 css的书写流程。

1.1. 实例:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
    .item {
      height: auto;
    }
  }
}

编译为

.sidebar {
    width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
  .sidebar .item {
    height: auto;
  }
}

2. 嵌套在@media中

@media允许互相嵌套使用，编译时，scss自动添加 and

2.1. 实例:

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

编译为

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

跳出嵌套

child::Scss 跳出嵌套 at-root命令

🪴qql1's digital garden

探索

Scss嵌套语法