Question

所以我在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;
}

Answer 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引用。

这个CSS语法可能吗？

1 个答案:

TL; DR