SASS文件结构：_typography、_layout等中的相同选择器

Question

我觉得这可能很简单，我只是错过了。最近，我使用了7-1文件夹结构，而不是单个scss文件。我很难在.panel(或h2或span)中引用_typography.scss中的字体样式，并在_layout.scss中引用相同的.panel(h2、span等)。

我从CSS pov中了解到，在排序时将它们分开是不合逻辑的，然而，从sass pov来看，我觉得应该有一种方法来构建这个结构，这样我的CSS就不会有两次提到..nav容器了。

请注意，我使用的是NPM，而不是ide编译器。也许我只是想构造一个不正确的结构，而不应该把它们分开。

请告诉我，

UPDATE --我在这里标记了弗里什的答案是正确的，因为他们设置它的方式是正确的，但是经过几天的研究，我决定添加一些上下文，因为我看到很多其他人已经创建了simiar线程。

1. 最初看SASS的方式是不正确的。我试图以一种我认为可以消除复杂性的方式使SASS工作：(在排版部分中有..nav容器{}排版规则，然后在布局部分中有..nav容器{}布局)。这不是正确的思维方式。
2. 真正的好处是所有内置的函数(占位符、混合器、扩展)都驱动了使SASS更有效的魔力。

但是，仍然有一种方法可以完成您想要做的事情，对不同的部分进行样式选择，例如，为特定的选择器将排版样式与布局样式分离等等。这是一个重大的唤醒电话。将样式块(或内容块)传递给混合器或其他。例如，：

@mixin button {  
 font-size: 1em;  
 padding: 0.5em 1.0em;  
 text-decoration: none;  
 color: #fff;  
 @content;  
}

.button-green {  
 @include button {  
   background: green  
 }
}

最后，

这个链接(

1. this link，https://openclassrooms.com/en/courses/5625786-produce-maintainable-css-with-sass/5951856-write-cleaner-code-with-sass-extensions)是它真正点击的地方，
2. 看一下以开头的段落“扩展很像mixins。”查看这个示例，因为应该很容易将其设置和结构方式应用于您要做的工作。
3. 对此做了更深入的研究，我在“传递样式块”和"sass传入内容块“上做了一些googling，这帮助了大量关于如何利用占位符、混合体和有效扩展的方法，同时仍然保持了sass
4. 的简单性。

Answer 1

这并不是一个具体的答案，因为有很多方法来解决这个问题(你肯定知道)，但我的想法如下。

我通常对泛型元素(_typography、_layout)使用泛型样式表(h1、h2、h3、.section、.container )。在多个文件中值得特别提及的任何元素都有可能是它自己的组件(例如panel.scss)。

这确实增加了浮动的文件夹和文件的数量，但我仍然发现这比一个或几个大文件更好。我通常会得到一个类似于以下内容的main.scss文件：

// main.scss
@import "_variables.scss";
@import "_typography.scss"; 
// etc....

@import "./components/panel.scss";
@import "./components/navContainer.scss"; // or, nav-container.scss!
// etc....

组件愉快地覆盖泛型样式，我可以在单个文件中跟踪它们的CSS。德夫快乐！您可以细分组件或其他文件，如您认为合适的。