How can one import only variables and mixins from Sass stylesheets?

css ruby-on-rails sass zurb-foundation modularity
dymk picture dymk · Aug 23, 2013 · Viewed 12.6k times · Source

I'm using the Zurb Foundation 4 (S)CSS framework, and I'm running into an issue of massively duplicated styles. This is because in every file that I @import 'foundation' in, all styles from Foundation are also imported (rules for body, .row, .button and friends). This leads to long SCSS compile times and a hard to navigate web developer console in Chrome, as all of Zurb's styles are declared four or five times.

To mitigate this, I've created a globals scss file, which contains the overrideable variables that Foundation uses (it's copy-pasted from foundation_and_overrides.scss, then foundation_and_overrides import globals). Importing just the globals.scss file gets rid of duplication only in files that don't make use of Foundation mixins.

It's in the files which make use of Foundation mixins: Can I import only the mixins from an SCSS file, without importing the concrete Foundation styles?

Answer

cimmanon picture cimmanon · Aug 23, 2013

Imports are an all or nothing thing. Everything that's in the file is what you get. If you look through the source of Foundation, though, there are variables you can modify that will suppress emitting styles (eg. in buttons, setting $include-html-button-classes to false will disable the styles). This design pattern is Foundation specific, you cannot expect other libraries to be authored this way.

When you import foundation via @import "foundation", you're importing this file: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. As you can see, it imports other files. You don't have to import this file if you don't need everything: just import the specific file you want (eg. @import 'foundation/components/side-nav' for only the side-nav file).

Related questions

Proper SCSS Asset Structure in Rails

So, I have an app/assets/stylesheets/ directory structure that looks something like this: |-dialogs |-mixins |---buttons |---gradients |---vendor_support |---widgets |-pages |-structure |-ui_elements In each directory, there are multiple sass partials (usually *.css.scss, but one or two *.…

Read More
How do I use reference images in Sass when using Rails 3.1?

I have a Rails 3.1 project with the asset pipeline working great. The problem is that I need to reference images in my Sass, but Rails calculates image URLs. (This is particularly important in production, where Rails appends the Git hash …

Read More
Bootstrap-sass not working within Rails App

I am attempting to contribute to a rails app which has the following in the gemfile: gem 'bootstrap-sass', '~> 2.3.2.2' gem 'sass-rails', '>= 3.2' It seems like everything works correctly in my layouts with the exception of columns: &…

Read More