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.
$body-bg: #fff !default; $body-color: $gray-dark !default;
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.
$body-bg: #fff; $body-color: $gray-dark;
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.
/* Breakpoint for extra-small viewport */
@include media-breakpoint-up(xs) { ... }
/* Breakpoint for small viewport */
@include media-breakpoint-up(sm) { ... }
/* Breakpoint for medium viewport */
@include media-breakpoint-up(md) { ... }
/* Breakpoint for large viewport */
@include media-breakpoint-up(lg) { ... }
/* Breakpoint for extra-large viewport */
@include media-breakpoint-up(xl) { ... }
// Usage in example for medium viewport:
@include media-breakpoint-up(md) {
.utility-class {
background-color: green;
}
}
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.
/* Extra small viewport or screen */
@media only screen and (min-width : 480px) {
// write CSS properties here
}
/* Small viewport or screen */
@media only screen and (min-width : 768px) {
// write CSS properties here
}
/* Medium viewport or screen */
@media only screen and (min-width : 992px) {
// write CSS properties here
}
/* Large viewport or screen */
@media only screen and (min-width : 1200px) {
// write CSS properties here
}
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.
// Extra small devices (smart phones, less than 34em)
@media (max-width: 33.9em) {
// write CSS properties here
}
// Small devices (phones, tablets less than 48em)
@media (max-width: 47.9em) {
// write CSS properties here
}
// Medium devices (tablets, small laptops less than 62em)
@media (max-width: 61.9em) {
// write CSS properties here
}
// Large devices (desktops, screens less than 75em)
@media (max-width: 74.9em) {
// write CSS properties here
}
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.
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? 🙂
Having the same issue, any updates? i’m using Gulp but don’t believe that is the culprit.
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