Goal: Using Bootstrap SASS for the first time
Understanding SASS is a must for theme maker. You should be able to alter boostrap variables.
If you do not have any idea about SASS you should read this first:
First thing first.
Add SASS to your current working directory.
❯ tree -d step-03 -L 2 step-03 ├── assets │ ├── css │ ├── images │ └── js └── sass ├── bootstrap └── css 7 directories
We are going to need them for the rest of this chapter.
Download Bootstrap SASS
Add Bootstrap to your vendors directory.
❯ tree -d step-03/sass/bootstrap -L 2 step-03/sass/bootstrap ├── mixins ├── utilities └── vendor 3 directories
Now you should see inside Bootstrap.
Now, it is about the right time to create custom SASS. Let’s say we create this
@import "../bootstrap/functions", "variables", "../bootstrap/bootstrap" ;
The import partials is from
We want to compile it to
You may compile with any SASS compiler that you need.
I made a
bash shortcut to my
dart sass binary.
Windows user can use
chocolatey to install
Consider compile to
❯ cd step-03 ❯ dart-sass --watch -I sass sass/css:assets/css Compiled sass/css/bootstrap.scss to assets/css/bootstrap.css. Compiled sass/css/main.scss to assets/css/main.css. Sass is watching for changes. Press Ctrl-C to stop.
Now you should see generated CSS.
❯ tree assets/css assets/css ├── bootstrap.css ├── bootstrap.css.map ├── main.css └── main.css.map 0 directories, 4 files
This should be the same as regular official Bootstrap.
2: Example: Altering Bootstrap
This is the basic boostrap customization.
Altering standard Bootstrap is simple. Consider change the behaviour by setting initial variable.
// Variables $pink: #e83e8c !default; $primary: darken($pink, 10%) !default;
What is Next ?
There is, a topic about Theme in Bootstrap. About making your tailor made stylesheets. Consider continue reading [ Bootstrap - SASS - Custom Class ].
Thank you for reading.