Css 是否可以在源中嵌套SASS选择器而不输出嵌套的SASS选择器？

例如，我希望通过执行以下操作使代码更易于阅读：

#article{
  ...

  #article_inner{
    ...
  }
}

但是，我希望将其编译为：

#article{
  ...
}

#article_inner{
  ...
}

---

这是否可能使用SASS？

是的，根目录下的

@将执行您想要的操作

然而，我对你问题的前提提出质疑

首先，假设您确实想要编写
#article{#article inner{
。为此，SASS将生成代码
#article#article inner{
。您希望它生成
#article inner{
。但是为什么呢？您可能担心解析、下载或应用前者的效率可能比后者低。但是，实际上，效率上的任何差异都是非常微小的，甚至根本不存在

第二，我想知道为什么你认为嵌套规则“更容易阅读”。事实上，对我来说，它更难阅读。大概你认为遵循HTML的结构会使它更容易阅读。实际上，遵循HTML的结构会使CSS变得脆弱。用计算机科学术语来说，这称为“耦合”，通常被认为是一件坏事；在这种情况下，您的HTML与CSS的耦合过于紧密。例如，如果出于任何原因，
#article inner
移动或出现在其他地方，那么，即使ID匹配，您的规则也将停止工作

经验丰富的SCSS编码人员很少使用其嵌套功能。相反，他们编写的规则与HTML正交，可以组合起来创建许多样式效果，而不必拘泥于HTML的层次结构。我认识的优秀SCSS编码人员在这种情况下仅限于嵌套例如
.class{color:red；&:hover{color:blue；}}
，或者在其他情况下，最多只能达到一个级别。在您的情况下，如果您必须使用根目录下的
@at
来执行您想要的操作，那么您现在实际上已经以可读性的名义降低了代码的可读性

SCS不会永远存在。总有一天CSS会处理它现在为我们所做的很多事情，包括变量。一些商店已经不再使用SASS了，因为它有丑陋、冗长的宏、混合、难以维护的功能，如
@extend
，以及过多的嵌套、返回到原始CSS或转发到更现代的预处理器，如suitCSS.We需要SaS越来越少的供应商预置；其他预处理器支持模块化的自动化厂商前缀工具。因此，在所有这些原因中，在编写SCS今天考虑您的代码可能需要在将来某个时间从SCS中移植的可能性时，这是不合理的。这表明您应该避免使用。很多特定于SCS的特性其实并不需要，例如案例中的嵌套

如果您想要可读性，请添加注释，无论如何您都应该这样做

#article { ... }

/* The `#article_inner` element is inside `#article`.
#article_inner { ... }

更一般地说，我会质疑基于ID的CSS编写方法。大概您打算在
#article inner
上指定一组属性，如字体大小、背景、填充等。我见过CSS中有十几个或更多属性。这有什么意义？您不妨用
样式编写这些属性属性；至少这样，您只有一个文件（HTML）管理。相反，知识渊博的CSS设计师创建可应用于许多元素的小型实用类。例如，他们可能定义一个
PaddedGrayBox
类，用于处理填充和背景。然后，他们在HTML中编写

<div id='article-inner' class='PaddedGrayBox FloatRight...'>



现在，这个更具可读性。查看HTML的人可以立即看到正在应用何种样式。如果你坚持使用这种方法，你可能会发现你可以完全不用使用ID，尽管我知道这对于那些相信这样做的面向jQuery的程序员来说是一个很大的改变<代码>$（'id'）
（或
getElementById
）每一行都是JavaScript编程的核心。
考虑到嵌套规则不仅在Sass中，而且在许多其他流行的预处理器中都有非常具体和定义良好的行为，我看不出这将如何更具可读性，并且不会让任何人感到困惑。
PaddedGrayBox FloatRight
更具可读性，但有什么区别介于此和
之间？我建议您查看一种流行的css组织方法，例如。使用
FloatRight
之类的实用程序类，无论您如何命名（SuiteCSS使用
u-FloatRight
），在CSS设计中是一个公认的原则，即使对于非常简单的单属性情况也是如此。至于BEM，我完全支持使用此类框架。我认为我所写的与BEM之间没有矛盾。就我个人而言，我对它的所有双连字符、双下划线和极端平坦性并不感到兴奋，但事实上，
PaddedGrayBox
在SuiteCSS这样的系统中，可能正是一个“组件”类型的类，包括它的命名方案。CSS变量是否已经被普遍称为CSS4？现在，我感兴趣的是，该术语将如何确定哪些新模块构成“CSS3”，哪些模块构成“CSS4”。