Where to Discuss?

Local Group

Preface

Goal: Using Bootstrap SASS for the first time

Understanding SASS is a must for theme maker. You should be able to alter boostrap 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

Bootstrap SASS: Directory Preparation

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.

Bootstrap SASS: 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.

Bootstrap SASS: Compile

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

Bootstrap SASS: Generated CSS

This should be the same as regular official Bootstrap.


2: Example: Altering Bootstrap

This is the basic boostrap 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;

Bootstrap SASS: Example: Pink Navigation Bar


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.