Question

我希望有一个.scss文件，其中包含所有其他.scss文件的变量。但是如果我这样做，.scss个.scss个样式在我的$white: #FFF; $black: #000; $bg_red: red; .mt30 { margin-top: 30px; }个文件中都会重复：

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

@include "global"

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

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

@include "global"

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

main.scss - 我也希望在此文件中使用全局变量和样式。

.css

但每个最终的.mt30文件都包含来自 global.scss 的样式。所以我的页面上有几个{{1}}样式。如何避免呢？

Answer 1

似乎问题不是样式的重复，而是库或配置文件的重复。为此，只需稍微改变代码的结构即可。首先，通过更改名称（以及所有其他部分）使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";

因为您在标题和主页之前导入全局，后两者将可以访问前者中的任何内容。另外需要注意的是，我将一个声明的样式.mt30从全局移动到主要部分，只是为了确保在全局配置文件中没有声明样式。

Answer 2

例如：Foundation框架有app.scss个文件。它首先导入settings然后导入foundation。在此之后，您可以添加特定于应用的规则。

settings包含所有Foundation组件的设置，不会导致生成的css。 foundation文件包含各个组件（如网格，按钮等）的分隔导入集。这些组件由先前导入的settings文件配置。要减少css文件大小，可以删除不必要组件的导入。

实际上，为了使其更易于访问，用户会删除foundation导入并将其替换为默认注释掉的组件的单独导入。

Answer 3

你可以使用它，它只需输入一次：

https://rubygems.org/gems/compass-import-once

用法

使用Sass命令行：

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

要在非罗盘环境中启用：

require 'compass/import-once/activate'

您可以在此处阅读有关此内容的更多信息：http://rubydoc.info/gems/compass-import-once/1.0.5/frames

如何避免SCSS中的样式重复？

3 个答案: