这种CSS语法可能吗？ [复制]答案

【问题标题】：Is this CSS Syntax possible? [duplicate]这种CSS语法可能吗？ [复制]
【发布时间】：2016-03-03 15:56:46
【问题描述】：

所以我在 Sass 网页上学习了一下它的语法，看到了一个奇怪的 CSS 语法，我不知道它是否可行。

在询问是否可行之前，我已经在 W3School 和其他网站上进行了搜索。

这是我觉得奇怪的代码：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

我的问题是这种语法是否可行，我试过了，但它不起作用。我还认为它可能是一种不同的语言并搜索但没有找到。

为了使上面的代码正常工作，我会做的正常语法是这样的：

nav > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav > ul > li {
    display: inline-block;
}

nav > a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

【问题讨论】：

这种语法只能与像 SASS 这样的框架一起工作，这可能就是为什么你发现它在 SASS 演示中工作但在纯 HTML/CSS 中不能工作的原因。
哦，谢谢@Dpeif 的解释 :)
如果您知道 Sass 参与其中（根据所选标签），您为什么不研究一下 Sass 是否符合您的要求？

标签： css sass

【解决方案1】：

SASS 是一个 CSS 预处理器。

什么是预处理器？

预处理器是一个程序，它接受一种类型的数据并将其转换为另一种类型的数据。

也就是说你在SASS网页中看到的代码不是CSS语法，是SASS语法，是经过预处理器翻译后，转化为后者。

您在上面提供的代码将被转换为如下形式：

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

TL;DR

在将该样式添加到网页之前，它会转换为 CSS。 HTML 页面中没有 stylesheet.sass 引用。

【讨论】：