html - 另一个 CSS 规则集中的 CSS 规则集

Question

我看到了下面的代码风格，这对我来说是全新的:

#nav {
  position: absolute;
  right: 0;
  ul {
    li {
      float: left;
      a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 0 10px;
      }
    }
  }
}

它的技术名称是什么？我可以在哪里阅读它？

Answer 1

这是 CSS 预处理器的语法。它们允许您使用变量和选择器嵌套之类的东西来创建您的 CSS 选择器。

例如，一个 Less 文件可能如下所示:

@color: #CCC;

ul {
    background-color: @color;
    li {
        color: red;
        &:hover {
            color: blue;
        }
    }
    .home & {
        background-color: black;
    }
}

将编译为:

ul {
    background-color: #CCC;
}
ul li {
    color: red;
    }
ul li:hover {
    color: blue;
    }
.home ul {
    background-color: black;
}

两个最受欢迎的选项:

• > Less
• > Sass