CODEWITHSUNDEEP
ruby-on-railsrubytwitter-bootstrap
x-yuri
x-yuri

Reputation: 18863

How should I go about managing sass code when using bootstrap-sass?

The documentation says:

Import Bootstrap styles in app/assets/stylesheets/application.scss:

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

bootstrap-sprockets must be imported before bootstrap for the icon fonts to work.

Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Then, remove all the //= require and //= require_tree statements from the file. Instead, use @import to import Sass files.

Do not use //= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.

But if I do as they say, my other stylesheets won't be included automatically, as they did before that. Should I include every stylesheet explicitly in layout? AFAIU, that would also make me have separate stylesheets in production environment, instead of one as it would have been without bootstrap-sass.

Upvotes: 0

Views: 582

Answers (2)

x-yuri
x-yuri

Reputation: 18863

There are several things here. First, by default each stylesheet is served in separate http request in development, and in one request in production (they are precompiled into one file). If we follow the docs, we'll end up having one request in development as well, which would negate performance benefit of compiling only the file that has changed. If we don't, we might end up having bootstrap several times in our stylesheets. In case we need some variables or mixins in several stylesheets.

So I suggest having it this way:

application.sass (do note that I put require_self before require_tree .):

/*
 *= require_self
 *= require_tree .
 */
// import bootstrap once
@import "bootstrap-sprockets"
@import "bootstrap"
.d1
    text-align: center

welcome.sass:

// in other files import only some particular partials
@import "bootstrap/variables"
@import "bootstrap/mixins"
.d2
    text-align: right

Upvotes: 2

Maxim
Maxim

Reputation: 9961

But if I do as they say, my other stylesheets won't be included automatically, as they did before that.

Yes, you a right.

1) You shouldn't remove your require directives from application.scss. They don't want to use require directives because in this case you don't have ability to use SASS variables and mixins inside of included files.

2) Just rename application.css to application.scss. They want it because in this case you will have ability to use @import directives inside application.scss file. This is mean that you will have ability to use SASS variables and mixins inside of included files.

Should I include every stylesheet explicitly from layout?

No, just leave them in application.scss

AFAIU, that would also make me have separate stylesheets in production environment, instead of one as it would have been without bootstrap-sass.

No, you will use one application.scss in different environments.

Upvotes: 1

Related Questions