Proper SCSS Asset Structure in Rails

by

The problem with CSS is, you do not want to automatically add all files.
The order of which your sheets are loaded and processed by the browser is essential. So you will always end up explicitly importing all your css.

As an example, lets say you have a normalize.css sheet, to get a default look instead of all the horrible different browser implementations. This should be the first file the browser loads. If you just randomly include this sheet somewhere in your css imports, it will then not only override the browser default styles, but also any styles defined in all css files that were loaded before it. This goes the same for variables and mixins.

After seeing a presentation by Roy Tomeij at Euruko2012 I decided for the following approach if you have a lot of CSS to manage.

I generally use this approach:

  1. Rename all existing .css files to .scss
  2. Remove all contents from application.scss

Start adding @import directives to application.scss.

If you are using twitters bootstrap and a few css sheets of your own, you have to import bootstrap first, because it has a sheet to reset styles.
So you add @import "bootstrap/bootstrap.scss"; to your application.scss.

The bootstrap.scss file looks like:

// CSS Reset
@import "reset.scss";

// Core
@import "variables.scss";
@import "mixins.scss";

// Grid system and page structure
@import "scaffolding.scss";

// Styled patterns and elements
@import "type.scss";
@import "forms.scss";
@import "tables.scss";
@import "patterns.scss";

And your application.scss file look like:

@import "bootstrap/bootstrap.scss";

Because of the order of the imports, you can now use the variables, loaded with @import "variables.scss"; in any other .scss file imported after it. So they can be used in type.scss in the bootstrap folder but also in my_model.css.scss.

After this create a folder named partials or modules. This will be the place of most of the other files. You can just add the import to the application.scss file so it will look like: 

@import "bootstrap/bootstrap.scss";
@import "partials/*";

Now if you make a bit of css to style an article on your homepage. Just create partials/_article.scss and it will be added to the compiled application.css. Because of the import order you can also use any bootstrap mixins and variables in your own scss files.

The only drawback of this method I found so far is, sometimes you have to force a recompile of the partial/*.scss files because rails wont always do it for you.

More Related Contents:

  1. How can one import only variables and mixins from Sass stylesheets?
  2. CSS for button with right triangle at lower right [closed]
  3. What’s the difference between SCSS and Sass?
  4. Import regular CSS file in SCSS file?
  5. Using fonts with Rails asset pipeline
  6. How to create color shades using CSS variables similar to darken() of Sass?
  7. Angular-cli from css to scss
  8. Using Rails 3.1 assets pipeline to conditionally use certain css
  9. Sass Invalid CSS Error: “expected expression”
  10. Modify twitter bootstrap navbar
  11. Dynamic Sass Variables
  12. Extending selectors from within media queries with Sass
  13. Ampersand (&) at the end, and part of, a selector in SASS
  14. What does an “&” before a pseudo element in CSS mean?
  15. Customize Bootstrap 4’s grid-system Breakpoints
  16. @import in @if statement in Sass
  17. Have a variable in images path in Sass?
  18. Next.js Global CSS cannot be imported from files other than your Custom
  19. SASS indented syntax on multiple lines?
  20. Rails 4: how do I use Sass Mappings?
  21. SASS – use variables across multiple files
  22. Placeholder Mixin SCSS/CSS
  23. Sass @each variable interpolation [duplicate]
  24. Does LESS have an “extend” feature?
  25. How to control number of items per row using media queries in Flexbox?
  26. Text Stroke (-webkit-text-stroke) css Problem
  27. Creating CSS3 Circles connected by lines
  28. How to properly introduce a light/dark mode in Bootstrap?
  29. how to watch changes in whole directory/folder containing many sass files
  30. SASS CSS: Target Parent Class from Child

Leave a Comment