blocks|key|1513056|text|例如:基金会框架有app.scss文件。它首先导入settings，然后导入foundation。在此之后，您可以添加应用程序的特定规则。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1513057|settings包含所有基金会组件的设置，并且不会膨胀产生的css。foundation文件包含单个组件(如网格、按钮等)的分离导入集。这些组件由以前导入的settings文件配置。若要减小css文件大小，可以删除不必要组件的导入。|1513058|实际上，为了使其更容易访问，用户删除foundation导入，并将其替换为默认注释掉的组件的单个导入。|1513059|entityMap^0|9|8|P|8|12|A|0|0|8|Y|A|26|8|0|I|A|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|K|$]]

For example: Foundation framework has <code>app.scss</code> file. It first imports <code>settings</code> then <code>foundation</code>. After this you can add your app specific rules. 

<code>settings</code> contains settings for all Foundation components and doesn't inflate resulting css. <code>foundation</code> file contains set of separated imports for the individual components like grid, buttons etc. Those components are configured by the previously imported <code>settings</code> file. To reduce css file size you can remove imports for the unnecessary components.

Actually, to make it more accessible, user removes <code>foundation</code> import and replace it with individual imports of the components that are commented out be the default.

blocks|key|1513119|text|有一件事你可以用，它是重要的-一次：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1513120|https://rubygems.org/gems/compass-import-once|offset|length|1513121|用法|1513122|要与Sass命令行一起使用：|1513123|sass+-r+'compass/import-once/activate'+...|code-block|syntax|javascript|1513124|在非指南针环境中启用：|1513125|require+'compass/import-once/activate'|1513126|您可以在这里阅读更多有关此的信息：http://rubydoc.info/gems/compass-import-once/1.0.5/frames|1513127|entityMap|0|LINK|mutability|MUTABLE|url|1|http://rubydoc.info/gems/compass-import-once/1.0.5/frames^0|0|0|19|0|0|0|0|0|0|0|H|1L|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1C|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1D|8|@]|9|@$D|1E|E|1F|1|1G]]|A|$]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|C]]|11|$5|X|Y|Z|A|$10|12]]]]

There's a thing that you can use for that, it's import-once:

<a href="https://rubygems.org/gems/compass-import-once" rel="nofollow">https://rubygems.org/gems/compass-import-once</a>

Usage

To use with the Sass command line:

<pre><code>sass -r 'compass/import-once/activate' ...
</code></pre>

To enable in non-compass environments:

<pre><code>require 'compass/import-once/activate'
</code></pre>

You can read more information on this here: <a href="http://rubydoc.info/gems/compass-import-once/1.0.5/frames" rel="nofollow">http://rubydoc.info/gems/compass-import-once/1.0.5/frames</a>

blocks|key|1849894|text|问题似乎不在于样式的复制，而在于库或配置文件的复制。为此，只需稍微改变一下代码的结构就可以了。首先，将global.scss文件的名称(以及所有其他部分)更改为以下划线_global.scss开头的部分。然后，创建一个清单文件，如app.scss。在里面，导入_global.scss和您需要的任何其他文件。这些其他文件现在可以访问app.scss可以访问的所有内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1849895|_global.scss|BOLD|1849896|$white:+#FFF;
$black:+#000;
$bg_red:+red;|code-block|syntax|javascript|1849897|_header.scss|1849898|.foo+{
++width:+100px;
++height:+50px;
++background-color:+$bg_red;
}|1849899|_main.scss|1849900|.mt30+{
++margin-top:+30px;
}

.boo+{
++width:+100px;
++height:+50px;
++background-color:+$white;
}|1849901|app.scss|1849902|//+Import+libraries+and+config;+adding+compass+as+an+example
@import+"global";
@import+"compass/css3";

//+Actual+selectors
@import+"header";
@import+"main";|1849903|因为您是在头和main之前导入全局的，所以后两者将可以访问前者中的任何内容。还要注意的是，我将声明的样式.mt30从全局移到主要的部分，只是为了确保全局配置文件中没有声明样式。|1849904|entityMap^0|1F|B|2C|C|37|8|3M|C|4M|8|0|0|C|0|0|0|C|0|0|0|A|0|0|0|8|0|0|1G|5|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@$9|1F|A|1G|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1H|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1I|8|@$9|1J|A|1K|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1L|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1M|8|@$9|1N|A|1O|B|H]]|D|@]|E|$]]|$1|T|3|U|5|K|7|1P|8|@]|D|@]|E|$L|M]]|$1|V|3|W|5|6|7|1Q|8|@$9|1R|A|1S|B|H]]|D|@]|E|$]]|$1|X|3|Y|5|K|7|1T|8|@]|D|@]|E|$L|M]]|$1|Z|3|10|5|6|7|1U|8|@$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|12|$]]

It seems that the issue isn't the duplication of styles, but the duplication of libraries, or configuration files. For that, all it takes is to just structure your code a little differently. Start by making your <code>global.scss</code> file a partial by changing its name (as well as all the other pieces) to start with an underscore, <code>_global.scss</code>. Then, create a manifest file, like <code>app.scss</code>. Inside there, import <code>_global.scss</code> and whatever other files you need. Those other files will now have access to everything that <code>app.scss</code> has access to:

_global.scss

<pre><code>$white: #FFF;
$black: #000;
$bg_red: red;
</code></pre>

_header.scss

<pre><code>.foo {
 width: 100px;
 height: 50px;
 background-color: $bg_red;
}
</code></pre>

_main.scss

<pre><code>.mt30 {
 margin-top: 30px;
}

.boo {
 width: 100px;
 height: 50px;
 background-color: $white;
}
</code></pre>

app.scss

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

// Actual selectors
@import "header";
@import "main";
</code></pre>

Because you're importing global before header and main, the latter two will have access to whatever's in the former. Also to note is that I moved the one declared style, <code>.mt30</code>, out from global into the main partial, only to make sure no styles were being declared in the global config file.

blocks|key|1849912|text|我建议您学习@use技巧，这样会使您更容易，并且停止使用@import本身，下面是一个有用的资源https://www.youtube.com/watch?v=CR-a8upNjJ0|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1849913|entityMap|0|LINK|mutability|MUTABLE|url|https://www.youtube.com/watch?v=CR-a8upNjJ0^0|1C|17|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I suggest you learn the @use technique, it will make things easier for you, and stop using the @import itself, here is a helpful resource
<a href="https://www.youtube.com/watch?v=CR-a8upNjJ0" rel="nofollow noreferrer">https://www.youtube.com/watch?v=CR-a8upNjJ0</a>

I want to have one <code>.scss</code> file with some varibles for all the rest <code>.scss</code> files. But if I do so its <code>.scss</code> styles are duplicated in all my <code>.scss</code> files:

global.scss - my global variables and styles file

<pre><code>$white: #FFF;
$black: #000;
$bg_red: red;

.mt30 {
 margin-top: 30px;
}
</code></pre>

header.scss - I want to use global vars and styles in this file.

<pre><code>@include "global"

.foo {
 width: 100px;
 height: 50px;
 backgrounnd-color: $bg_red;
}
</code></pre>

main.scss - I want to use global vars and styles in this file too.

<pre><code>@include "global"

.boo {
 width: 100px;
 height: 50px;
 backgrounnd-color: $white;
}
</code></pre>

But each final <code>.css</code> file has styles from global.scss. So I have several <code>.mt30</code> styles on my page. How to avoid it?

How to avoid duplication of styles in SCSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想要一个.scss文件，其中包含一些其他.scss文件的变量。但是，如果我这样做，它的.scss样式将在我的所有.scss文件中复制：global.scss -我的全局变量和样式文件$white: #FFF;$black: #000;$bg_red: red;.mt30 {    margin-top: 30px;}...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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