如何避免SCSS中样式的重复？
我想要一个.scss文件，其中包含一些其他.scss文件的变量。但是，如果我这样做，它的.scss样式将在我的所有.scss文件中复制：
global.scss -我的全局变量和样式文件
$white: #FFF;
$black: #000;
$bg_red: red;
.mt30 {
margin-top: 30px;
}header.scss -我想在这个文件中使用全局vars和样式。
@include "global"
.foo {
width: 100px;
height: 50px;
backgrounnd-color: $bg_red;
}main.scss -我也想在这个文件中使用全局vars和样式。
@include "global"
.boo {
width: 100px;
height: 50px;
backgrounnd-color: $white;
}但是每个最终的.css文件都有来自.css的样式。所以我的页面上有几种.mt30样式。如何避免呢？
回答 4
Stack Overflow用户
发布于 2014-08-11 19:38:03
问题似乎不在于样式的复制，而在于库或配置文件的复制。为此，只需稍微改变一下代码的结构就可以了。首先，将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";因为您是在头和main之前导入全局的，所以后两者将可以访问前者中的任何内容。还要注意的是，我将声明的样式.mt30从全局移到主要的部分，只是为了确保全局配置文件中没有声明样式。
Stack Overflow用户
发布于 2014-06-12 11:30:03
例如:基金会框架有app.scss文件。它首先导入settings，然后导入foundation。在此之后，您可以添加应用程序的特定规则。
settings包含所有基金会组件的设置，并且不会膨胀产生的css。foundation文件包含单个组件(如网格、按钮等)的分离导入集。这些组件由以前导入的settings文件配置。若要减小css文件大小，可以删除不必要组件的导入。
实际上，为了使其更容易访问，用户删除foundation导入，并将其替换为默认注释掉的组件的单个导入。
Stack Overflow用户
发布于 2014-08-11 18:47:42
有一件事你可以用，它是重要的-一次：
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
https://stackoverflow.com/questions/24182734
复制相似问题
腾讯云开发者
