Learn About Sass Variables for Customizing in Bootstrap 4

3
8185
Sass Variables

In this article, we are going to discuss the use of Sass variables for customizing our web front end HTML pages in Bootstrap 4. SASS stands for Syntactically Awesome Stylesheet. It is a CSS pre-processor which helps in the reduction of the repetition with CSS that ultimately saves our time. It is known to be more powerful as well as stable CSS extension language which describes the style of document structurally. In Bootstrap 4, we can customize elements with built-in custom variables files and toggle easily with global CSS preferences with new $enable-* Sass variables. In order to customize variables, we need to override a variable’s value and recompile with the included Gruntfile as needed.

Customizing variables
When you download a Bootstrap 4 package, you will observe that default variables are present at location /scss/_variables.scss as shown below. In order to customize the Bootstrap variables, we need to copy the settings from this file into the provided _custom.scss file to override the Bootstrap defaults without modifying key, versioned files. Therefore, just copy and paste the relevant lines from there into the _custom.scss file. Also, we can modify the values, and recompile our Sass to change our system default values into the customized ones. We need to remove the !default flag from the values that we have overridden.

Example
Let’s understand this with the help of the following example. Say, we need to change the background-color and color for the <body>, for that we need to make the following changes.

Step 1: – Open the file /scss/_variables.scss and search for the following lines of code.

Step 2: – Copy these variables from _variables.scss to _custom.scss file to override the default values without modifying the source files.
Step 3: – Remove the !default flag, if present.

Step 4: – Recompile our Sass to change our system default values into the customized ones.
Variable customization has successfully completed, we are all set at this point.

Note: – Likewise, if we want to modify any other variable then we need to just override, including the global options as listed below.

Global options
We can search, find and customize these variables for key global options in our _variables.scss file as shown below.

S No.

Variable

Values

Description

1.

$spacer

1rem, or any value > 0

This variable is used to specify the default spacer value for our spacer utilities. It has a default value of 1 rem.

2.

$enable-rounded

true or false

This variable is used to enable the predefined border-radius styles on various components. It has a default value of true.

3.

$enable-shadows

true or false

This variable is used to enable the predefined box-shadow styles on various components. It has a default value of false.

4.

$enable-gradients

true or false

This variable is used to enable the predefined gradients via background-image styles on various components. It has a default value of false.

5.

$enable-transitions

true or false

This variable is used to enable the predefined transitions on various components. It has a default value of true.

6.

$enable-hover-media-query

true or false

It has a default value of false.

7.

$enable-grid-classes

true or false

This variable is used to enable the generation of CSS classes for the grid system (e.g., .container, .row, .col-md-1, etc.). It has a default value of true.

8.

$enable-print-styles

true or false

This variable is used to enable the styles for optimizing printing. It has a default value of true.

Bootstrap v4 with SASS
When using Bootstrap v4 with SASS, we are writing our source CSS in Sass therefore, all of our media queries are available via Sass mixins as shown below.

Difference between Bootstrap 3.3.6 vs Bootstrap 4.0.0 Breakpoints
In Bootstrap 4.0.0, the pixel based units have moved to relative em/rem based units which has the base font-size of 16 pixels. Also, the grid in v4 has been broken down into further sub-divisions. We need to first understand the grid breakpoints within Bootstrap v4 before we move on to our work with Sass files for media queries. The following table shows the translation of em/rem to pixels.

Grid Breakpoint

Container Max Width

em

px

em

px

xs

0

0

sm

34em

544px

34rem

544px

md

48em

768px

45rem

720px

lg

62em

992px

60rem

960px

xl

75em

1200px

72.25rem

1156px

When we are using Bootstrap 3.3.6 with SAAS, our media queries will have the min-width or max-width width specified in pixels as shown below.

When we are using Bootstrap 4.0.0 with SAAS, our media queries will have the min-width or max-width width specified in relative em/rem based units as shown below.

This is to be noted that extra-large device greater than 75em of size does not require media query since the extra-large breakpoint has no upper bound on its width.

Conclusion
In this chapter, we have discussed the customization of the Sass variables which are present in /scss/_variables.scss. All we have to do is to identify the elements to be customized and copy the associated lines of code from this file to _custom.scss in order to override the Bootstrap defaults without modifying key and versioned files. Also, we can customize these variables for key global options in our _variables.scss file. Later, we compared (Bootstrap 3.3.6 vs 4.0.0) the use of SAAS media queries with Bootstrap v4 where the pixel based units have moved to relative em/rem.

3 COMMENTS

  1. Hi,

    I love the idea of copying vars to a custom file so we can leave core files alone.

    However, doing something simple like changing the brand-primary from blue to red has got me stumped.

    Editing the vars file works as expected. All blue instances become red. (Buttons, Links etc)

    $brand-primary: $red !default

    However, doing the same in the custom file doesn’t work! Even when omitting the !default flag. Any ideas? Anyone? 🙂

      • in w/e can you are still in figuring it out, i just had to move the order of the _custom import in my bootstrap.scss to the top above the variables import

LEAVE A REPLY

Please enter your comment!
Please enter your name here