Sass 如何避免在SCS中重复样式？

我想要一个

.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

样式。如何避免？

< P>：例如：基础框架有<代码> App.SCSS文件。它首先导入

设置

，然后导入

基础

。在此之后，您可以添加特定于应用程序的规则

<>代码>设置< /代码>包含所有基础组件的设置，并不会导致生成的CSS膨胀。代码>基础文件包含一组单独导入的组件，如网格、按钮等。这些组件由以前导入的

设置

文件配置。要减小css文件大小，可以删除不必要组件的导入

---

实际上，为了使其更易于访问，用户删除了

foundation

import，并将其替换为单独导入的组件，这些组件被注释为默认组件。

有一件事可以使用，即导入一次：

用法

要与Sass命令行一起使用，请执行以下操作：

sass -r 'compass/import-once/activate' ...

要在非指南针环境中启用：

require 'compass/import-once/activate'

---

您可以在此处阅读更多信息：

问题似乎不是样式的复制，而是库或配置文件的复制。为此，所需要做的只是稍微改变代码的结构。首先，将您的

global.scss

文件更改为部分文件，将其名称（以及所有其他部分）更改为以下划线

\u global.scss

开头。然后，创建一个清单文件，如

app.scss

。在里面，导入

\u global.scss

和您需要的任何其他文件。这些其他文件现在可以访问

app.scss

可以访问的所有内容：

\u global.scss

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

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

.mt30 {
  margin-top: 30px;
}

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

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

// Actual selectors
@import "header";
@import "main";

\u header.scss

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

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

.mt30 {
  margin-top: 30px;
}

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

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

// Actual selectors
@import "header";
@import "main";

\u main.scss

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

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

.mt30 {
  margin-top: 30px;
}

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

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

// Actual selectors
@import "header";
@import "main";

app.scss

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

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

.mt30 {
  margin-top: 30px;
}

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

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

// Actual selectors
@import "header";
@import "main";

---

因为您要在header和main之前导入global，所以后两个可以访问前者中的任何内容。还要注意的是，我将一个声明的样式

.mt30

，从全局移到了主部分，只是为了确保在全局配置文件中没有声明任何样式。

我不理解这里的问题。您不需要重复的信息，但您知道导入是如何工作的。如果你想多次导入一个文件，不要在其中放入你不想重复的代码。“每个final.css文件”-为什么你有多个css文件？导入所有子SCSS文件后，您应该只有一个从单个“主”SCSS文件创建的已编译文件-@cimmanon，嘿，这是一个examle。真正的问题是SCS、指南针、ASTEIC不够好。如果我需要其他文件中某个主文件的变量，我必须在其他文件中导入该主文件。例如，使用scss bootstap，当我需要在每个文件中使用bootstrap的变量时，我会在页面上的每个文件中复制所有bootstrap的样式。如何避免呢？如果样式已经在某个地方导入过一次，为什么这些工具会再次包含样式？重复：@Paulie_D有一些建议，建议每页有多个css文件，例如，提供一个、和/或一个全局文件和一个特定于页面的文件，以优化文件大小