如何避免在SCSS中重複樣式？

Question

我想有一個.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樣式。如何避免它？

Answer 1

例如：Foundation框架有app.scss文件。它首先進口settings然後foundation。之後，您可以添加您的應用程序特定規則。

settings包含所有Foundation組件的設置，並且不會產生最終的CSS。 foundation文件包含一組單獨的組件，如網格，按鈕等。這些組件由之前導入的settings文件進行配置。爲了減少css文件大小，您可以刪除不必要組件的導入。

實際上，爲了使它更易於訪問，用戶刪除foundation導入，並將其單獨導入的組件註釋掉爲默認值。

Answer 2

有，你可以使用一個東西，這是一次導入：

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

使用

要與薩斯命令行中使用：

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

要在非羅盤環境下啓用：

require 'compass/import-once/activate' 

你可以閱讀關於這個位置的詳細信息：http://rubydoc.info/gems/compass-import-once/1.0.5/frames

Answer 3

看來，問題不在於風格的重複，但庫或配置文件的複製。爲此，所需要的只是以不同的方式構建代碼。首先通過更改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從全局移到了主要部分，只是爲了確保沒有在全局配置文件中聲明樣式。