@import bourbon in multiple files generates "cruft" #9

Closed
charly opened this Issue Aug 22, 2011 · 7 comments

Projects

None yet

6 participants

charly commented Aug 22, 2011

hello,
here's some files i have for my stylesheet :
asset/stylesheets :
-- application.css.scss
-- structure.css.scss
-- elements.css.scss
-- styles.css.scss

I will need @import 'bourbon' in all those files to use the mixins but when I import bourbon I get a whole bunch of stuff (@-webkit-keyframes fade-in....) EACH TIME.

I was used to compass with the concept of partials and imports being available globally so I could @import "utilities" once and use them helpers everywhere... I don't mind writing @import "bourbon" in every file but then it should not generate text.

I realize that this may also be a sprocket issue (why can't an import be global ?) but meanwhile bourbon doesn't fit in !

thanx for the gem

charly commented Aug 23, 2011

Update : sass does the job of importing partials (files with underscore) making mixins available for the files "below".

So the workaround to my problem is :

  • rename application.css to application.css.scss
  • rename structure.css.scss to _structure.css.scss so it's a partial
  • then in applications.css.scss
    @import "bourbon";
    @import "structure";
    @import etc => the equivalent of my old _base.sass file in compass
    and then right my code!

The main problem here is the conceptual collusion of require and @import.
How I see it now require, with sass, is at worst useless at best misleading.

I'm curious about this workaround. Are you saying you can somehow mix require and import so that you can @import bourbon first, then require your other SCSS files (say, with require_tree .) and the other files will be able to see the methods and mixins defined in bourbon?

Can you post a gist of your code/directory structure? I'm banging my head against the wall trying to figure out how to get a bunch of disparate files to reference a common set of mixins without having the asset pipeline spit out a ton of cruft.

charly commented Aug 26, 2011

#application.css.scss
/*

  • This is a manifest file that'll automatically include all the stylesheets available in this directory
  • and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
  • the top of the compiled file, but it's generally better to create a new file per style scope.
    *= require_self
  • require_tree .
    */

@import "bourbon";
@import "themes";
@import "elements";
@import "stylings";
@import "structure";

my (flat) file structure : "application.css.scss", "_themes.css.scss", "_elements.css.scss" etc.

The trick is to use require_self once in application.scss.css and then only use the sass facility @import : the css is imported (once) and the mixins are available to all the files you imported below.

Contributor

This is a nice workaround, but I think the real solution is to remove the fade-in helpers. That's the only place where data is actually written out (as opposed to just includes and functions) and it seems a little out of place. I'm attaching a patch that fixes this.

+1

@plapier plapier closed this in 3c3ffcd Sep 6, 2011
Contributor
plapier commented Sep 6, 2011

I agree with the discussion, it does output a bit of cruft. I updated the documentation for rails 3.1. If I missed something in the recent commit, please let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment