嵌套

index.scss

.nav {
  background: red;
  ul {
    height: 100px;
    li {
      list-style: none;
      padding: 10px;
    }
  }
}

index.css

.nav {
  background: red;
}
.nav ul {
  height: 100px;
}
.nav ul li {
  list-style: none;
  padding: 10px;
}

嵌套时使用&符号调用父选择器

.nav {
  background: red;

  ul {
    height: 100px;

    li {
      list-style: none;
      padding: 10px;

      a {
        background: green;

        &:hover {
          background: yellow;
        }
      }
    }
  }

  & &-text {
    font-size: 100px;
  }
}

.nav {
  background: red;
}
.nav ul {
  height: 100px;
}
.nav ul li {
  list-style: none;
  padding: 10px;
}
.nav ul li a {
  background: green;
}
.nav ul li a:hover {
  background: yellow;
}
.nav .nav-text {
  font-size: 100px;
}

嵌套属性

body {
  font: {
    family: Arial, Helvetica, sans-serif;
    size: 30px;
    weight: bold;
  }
}

.border {
  border: 1px solid red {
    left: 1px solid green;
    right: 2px solid orange;
  }
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
}

.border {
  border: 1px solid red;
  border-left: 1px solid green;
  border-right: 2px solid orange;
}