Table of contents

• About this tutorial
• Learning Sass
• How to customize
• Importing Sass partials
• Manupulating variables
• Using Sass mixins
• Gradient and shadow effects

About this tutorial

This short turorial explains how to customize Bootstrap 4 styles. Bootstrap CSS is written in Sass. You can customize styles by extending Bootstrap source code. Usually you do not have to modify original code.

The tutorial is written in pug and built with npm on node.js. The source code is maintained by GitHub. The site is hosted by GitHub Pages.

Building this tutorial

This tutorial is also a working example of Bootstrap 4 customization and site development. You can download source files and build site contents by yourself. See Building this tutorial for detail.

Learning Sass

Sass is required to customize Bootstrap. But Bootstrap source code is also good material to study Sass. You can read Bootstrap code and study Sass with referencing Sass documents.

Sass was originally coded in Ruby and several implementations have been ported to other languages (see Wikipedia). Three official implementations exist (Ruby, C++, and Dart).

The following are selected documents for studying Sass. It is imcomplete but propably enough for you.

• Sass reference (for Ruby-Sass)
  • Sass builtin functions
  • No command line reference (see sass --help)
• libsass (C++ implementation)
  • node-sass (node.js interface, used in this tutorial)
    • node-sass CLI
• Wikipedia: Sass (Stylesheet language)