Preface
Goal: Using Bootstrap SASS for the first time
Understanding SASS is a must for theme maker. You should be able to alter bootstrap variables.
Reading
If you do not have any idea about SASS you should read this first:
1: Overview
First thing first.
Directory Preparation
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.
Custom SASS
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 sass/css
.
We want to compile it to assets/css
.
SASS Tools
You may compile with any SASS compiler that you need.
I made a bash
shortcut to my dart sass
binary.
alias dart-sass='/media/Works/bin/dart-sass/sass'
Windows user can use chocolatey
to install sass
.
Compile SASS
Consider compile to css
directory.
❯ 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 bootstrap customization.
The Sylesheet
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.