Bootstrap+Sass

Install SASS

• In Mac’s terminal, install Ruby first.
• Then run gem install sass
• For some reason my sass dissappeared and I had to reinstall it using sudo sudo gem install sass
• To confirm you have successfully installed sass -v
• Create a Scss file, ex: input.scss
• To generate css file once, run sass [path-to]input.scss [path-to]output.css
• To generate css file constantly while you make changes, run

  sass --watch inputfile:outputfile
  example:
  sass --watch sass/main.scss:public/css/main.css
  

Reference

Use-Sass

Install BOOTSTRAP-SASS

• In Mac’s terminal, install bower globally npm install -g bower
• install bootstrap sass using bower bower install --save bootstrap-sass
• See dependencies installed in a file bower init And follow instructions.

Reference

Custom Bootstrap Theme With Sass

Incorporate bootstrap-sass in project

• Create a folder for SASS files and a main file

  create root/sass/main.scss

• Import bootstrap-sass files to the main sass file

  in main.scss

  @import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
  @import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap-compass";
  

  (Must include the ; at the end)

• Create a css file for the sass to be converted to

  create root/public/css/main.css

• Compile the scss file to css file using command line sass sass/main.scss public/css/main.css Now you have a pretty big main.css file with all the setting you imported from the two bootstrap files
• Include css file in index.html ```

So what everchange you want to give to your css, it should be done in the sass folder, not the css file, not the original bootstrap file. When we use things from boostrap, we just make a copy into the sass folder then import it to the main scss file.
- Copy content in 
> root/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
- Paste it in a new file 
> root/sass/_customVariables.scss
- Import it to the main scss file, in
> root/sass/main.scss

@import “./customVariable”;

(You don't need to include the underscore and the extension .scss. Sass is smart and will figure it out for you.)
- Change things in _variables.scss
- Add individual element style changes to other files, for example
create
> root/sass/_homepage.scss
then import it in 
> root/sass/main.scss

@import “./homepage”; ``` TBD: Now I have not figured out if the order of files imported affect anything?

Why the underscore?

A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

BOOTSTRAP TIPS

container v.s. container-fliud