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

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

1 个答案: