Geek Answers Handbook

How to avoid duplication of styles in SCSS?

I want to have one .scss file with some variables for all other .scss files. But if so, the .scss styles .scss duplicated in all my .scss files:

global.scss - my global variables and style files

 $white: #FFF; $black: #000; $bg_red: red; .mt30 { margin-top: 30px; }

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

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

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

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

But every final .css file has styles from global.scss . Thus, I have several .mt30 styles on my page. How to avoid this?

+2
sass
source share
3 answers

It seems that the problem is not duplication of styles, but duplication of libraries or configuration files. To do this, all that is required is to simply structure your code in a slightly different way. Start by partially modifying your global.scss file by changing its name (like everyone else) to start with an underscore, _global.scss . Then create a manifest file, for example app.scss . Inside, import _global.scss and any other files you need. These other files will now have access to everything app.scss has access 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";

Since you are importing global in front of the header and main, the last two will have access to what was in the first. It should also be noted that I moved one .mt30 declared style from global to primary partial, just to make sure that no style was declared in the global configuration file.

+4
source share

For example: Foundation framework has an app.scss file. First it imports settings , then foundation . After that, you can add your own custom rules for your application.

settings contains settings for all Foundation components and does not inflate the css result. foundation file contains a set of divided imports for individual components, such as a grid, buttons, etc. These components are configured by a previously imported settings file. To reduce the size of the css file, you can remove the import for unnecessary components.

In fact, to make it more accessible, the user removes the foundation import and replaces it with individual import of the components that are commented out, by default.

0
source share

Here is what you can use for this: import-once:

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

Using

For use with the Sass command line:

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

To enable in a non-compass environment:

 require 'compass/import-once/activate'

You can read more about this here: http://rubydoc.info/gems/compass-import-once/1.0.5/frames

0
source share

More articles:


All Articles