what should application.scss look like when using bootstrap-sass ruby on rails
1. About require
*= require_self
means use this file (application.scss)
*= require_tree .
means use all file on folder(tree) stylesheets
In my opinion, you should and use require all file on tree instead require_tree
. Since with require file by file, you can control the order of which file you want to run.
So keep *= require_self
and remove *= require_tree .
and require all file you need.
My example application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require nprogress
*= require nprogress-bootstrap
*= require nprogress-turbolinks5
*= require global
*= require articles
*= require search
*= require footer
*= require header
*= require contacts
*= require notices
*= require aui-flash
*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";
2. Override bootstrap styles
To override bootstrap styles, follow this customize
Another way to change style bootstrap is, put an ID to parent of item or its self which you want to change
Ex:
You have <button class="btn btn-primary">Hello</button>
Now you want to change class btn-primary
to background-color: red
You can try <button class="btn btn-primary" id="red-primary">Hello</button>
And your style:
#red-primary.btn-primary{
background-color: red;
}
But with this way, every you want to override style, the item must be has a ID. May be not good.
UPDATE 1
If you want to use sass
. In you application.sass
@import nprogress
@import global
@import articles
Require statement in application.css.scss
application.css.scss
or application.css
are kinda the same. Just rename your application.css
to application.css.scss
.
As for adding that line, it'll need to be right up the top, in a comment. Like this:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_self
*= require colorbox-rails
*/
@import "bootstrap";
@import "welcome";
@import "sessions";
@import "users";
How do I organize SCSS in rails?
You don't need to use Sprockets comments in your application.scss and must only use @import
CSS rules.
From rails-sass documentation:
Sprockets provides some directives that are placed inside of comments
called require, require_tree, and require_self. DO NOT USE THEM IN
YOUR SASS/SCSS FILES. They are very primitive and do not work well
with Sass files. Instead, use Sass's native @import directive which
sass-rails has customized to integrate with the conventions of your
Rails projects.
Then, if you have any other .scss that needs to be precompiled, you will have to explicitly add them using the Rails.Application.config.assets.precompile
directive, then the sprockets railtie will do the rest of the job!
To answer your original question, the reason why the open source project do not need to specify assets to precompile is because they are using config.assets.compile = true
in the config/environment/production.rb file. This is obviously a very bad practice and I don't recommend you to switch this directive to true
in a production environment... you will end up with a slow code making a lot of requests and there a slow page load.
Proper SCSS Asset Structure in Rails
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:
- Rename all existing .css files to .scss
- 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.
Rails - How to set 1 scss file for 1 view
The most important piece you are probably missing is that Sprockets won't serve any asset, mainly the css and js need to be declared in your asset manifest. Quoting the docs:
If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the precompile array in config/initializers/assets.rb:
Rails.application.config.assets.precompile += ['admin.js', 'admin.css', 'swfObject.js']
Use the expected resulting name (with .css
extension) and not the source file (with the .scss
extension).
Related Topics
Draggable Line Chart in R/Shiny
Javascript:For Loop with Timeout
How to Include HTML in a Js Rails Response
How to Get an Ajax Get-Request to Wait for the Page to Be Rendered Before Returning a Response
How to Detect Emoji Using JavaScript
How to Add/Remove a Class in JavaScript
Correct Usage of Addeventlistener()/Attachevent()
How to Render a Partial from JavaScript
How to Remove a Character from a String Using JavaScript
Difference Between Date(Datestring) and New Date(Datestring)
Is JSON Hijacking Still an Issue in Modern Browsers
Selectionstart/Selectionend on Input Type="Number" No Longer Allowed in Chrome
How Does a Function in a Loop (Which Returns Another Function) Work
Why Is It Frowned Upon to Modify JavaScript Object's Prototypes