17

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

global.scss - my global variables and styles file

$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 too.

@include "global"

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

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

cimmanon
  • 67,211
  • 17
  • 165
  • 171
Green
  • 28,742
  • 61
  • 158
  • 247
  • 1
    I don't understand the problem here. You don't want duplicate information, but you understand how imports work. If you want to import a file multiple times, don't put code in it that you don't want duplicated. – cimmanon Jun 12 '14 at 11:02
  • 2
    **"each final .css file"** - Why do you have more than one CSS file? You should only have one complied file which is created from a single 'main' SCSS file after importing all of the sub-SCSS files - http://www.sitepoint.com/architecture-sass-project/ – Paulie_D Jun 12 '14 at 11:09
  • @cimmanon, Hey, it is an examle. The real thing is that SCSS, Compass, Assetic are not good enough. If I need a variable from one main file in some other files, I have to import that main file in each other file. So for example with scss bootstap I have all bootstrap's styles duplicated in every file on the page when I need bootstrap's vars in my each file. How to avoid it? Why these tools include styles again if styles are already imported once somewhere? – Green Jun 12 '14 at 11:21
  • Duplicate: http://stackoverflow.com/questions/18408324/how-can-one-import-only-variables-and-mixins-from-scss-stylehsheets – cimmanon Jun 12 '14 at 11:39
  • 1
    @Paulie_D there are some suggestions of multiple css files per page, for example, delivering an [above the fold file](https://css-tricks.com/authoring-critical-fold-css/), and / or a global file and a page specific file in order to optimise file sizes – Toni Leigh Jun 30 '15 at 11:50

4 Answers4

20

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 global.scss file a partial by changing its name (as well as all the other pieces) to start with an underscore, _global.scss. Then, create a manifest file, like app.scss. Inside there, import _global.scss and whatever other files you need. Those other files will now have access to everything that app.scss has access to:

_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";

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, .mt30, out from global into the main partial, only to make sure no styles were being declared in the global config file.

dinocarl
  • 708
  • 7
  • 14
1

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

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

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

JAre
  • 4,666
  • 3
  • 27
  • 45
0

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

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

Usage

To use with the Sass command line:

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

To enable in non-compass environments:

require 'compass/import-once/activate'

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

fernandopasik
  • 9,565
  • 7
  • 48
  • 55
0

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 https://www.youtube.com/watch?v=CR-a8upNjJ0

Mostafa Mohamed
  • 1
  • 2