logo标签列表

如何避免在SCSS中重复使用样式？

sass
17

我希望有一个.scss文件，其中包含所有其它.scss文件所需的一些变量。但是这样做会导致我的.scss样式在所有.scss文件中重复出现:

global.scss - 我的全局变量和样式文件

$white: #FFF;
$black: #000;
$bg_red: red;

.mt30 {
    margin-top: 30px;
}

header.scss - 我想在这个文件中使用全局变量和样式。

@include "global"

.foo {
    width: 100px;
    height: 50px;
    backgrounnd-color: $bg_red;
}

main.scss - 我也想在这个文件中使用全局变量和样式。

@include "global"

.boo {
    width: 100px;
    height: 50px;
    backgrounnd-color: $white;
}

但是每个最终的.css文件都有来自global.scss的样式。因此我页面上有几个.mt30样式。如何避免这种情况？

1
我不明白这里的问题。你不想要重复的信息，但你理解导入的工作原理。如果你想多次导入一个文件，请不要在其中放置你不想重复的代码。 - cimmanon
2
"每个最终的.css文件" - 为什么你有多个CSS文件？你应该只有一个编译后的文件，它是由一个主SCSS文件创建的，在导入所有子SCSS文件之后 - http://www.sitepoint.com/architecture-sass-project/ - Paulie_D
@cimmanon，嗨，这只是一个例子。真正的问题是SCSS、Compass和Assetic都不够好。如果我需要从一个主文件中获取变量并在其他文件中使用，我必须在每个文件中导入该主文件。因此，例如，使用scss bootstap时，当我需要在每个文件中使用bootstrap的vars时，我会在页面上的每个文件中重复所有bootstrap的样式。如何避免这种情况？为什么这些工具会再次包含样式，如果样式已经在某个地方被导入了一次呢？ - Green
请只从 SCSS 样式表中导入变量和混合器，以下是如何实现的方法： - cimmanon
1
@Paulie_D 有一些建议是每个页面使用多个CSS文件，例如，提供一个以上的折叠文件以及/或者一个全局文件和一个特定页面的文件，以优化文件大小。 - Toni Leigh
4个回答
20

看起来问题不是样式的重复，而是库或配置文件的重复。为此，您只需要稍微改变代码结构即可。首先，通过更改名称（以及所有其他部分）以下划线开头将您的global.scss文件更改为局部文件_global.scss。然后，创建一个清单文件，比如app.scss。在其中导入_global.scss和其他所需的文件。这些其他文件现在可以访问app.scss可以访问的所有内容：

_global.scss

$white: #FFF;
$black: #000;
$bg_red: red;

_header.scss

.foo {
  width: 100px;
  height: 50px;
  background-color: $bg_red;
}

_main.scss

.mt30 {
  margin-top: 30px;
}

.boo {
  width: 100px;
  height: 50px;
  background-color: $white;
}

app.scss

// Import libraries and config; adding compass as an example
@import "global";
@import "compass/css3";

// Actual selectors
@import "header";
@import "main";
因为在导入header和main之前导入了global，因此后两者将可以访问前者中的任何内容。还要注意的是，我将声明的样式.mt30从全局移到了主要部分中，只是为了确保没有在全局配置文件中声明样式。
为什么你必须将.mt30从_global.scss中移出？ - Kevin Chandra
1
例如：Foundation框架有一个名为app.scss的文件。它首先导入settings，然后是foundation。之后，您可以添加特定于应用程序的规则。 settings包含所有Foundation组件的设置，并且不会膨胀结果CSS。foundation文件包含单独组件的分离导入集，例如网格、按钮等。这些组件由之前导入的settings文件进行配置。为了减少CSS文件大小，您可以删除不必要组件的导入。
实际上，为了使其更易访问，用户删除foundation导入，并将其替换为默认情况下已注释的组件的单独导入。
0
0
以下是与程序编写相关的内容，请将其翻译为中文。只返回翻译后的文本：例如，代码示例可能很有用：例如如何/在哪里使用@use - Mihey Egoroff
请查看@MiheyEgoroff的视频。 - Mostafa Mohamed
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接