SASS: A CSS preprocessor
If you are looking for ways to use SASS with Bootstrap read on, you will find below a simple guide to accomplish that.
SASS and LESS are tools that greatly enhance CSS development and are extensively being used by development agencies and corporates for dynamic UI integrations.
SASS, a CSS preprocessor brings real language features to CSS such as variables and mixins (functions) which result in clean, extensible and reusable CSS codes.
Bootstrap4 being a popular open-source framework, provides complete pre-built SASS preprocessor. It allows developers and users to easily build and customize an UI.
SASS with Bootstrap!!!
Bootstrap utilizes source SASS files to take advantage of variables, maps and mixins besides others.
We don’t need to edit/modify Bootstrap’s core files. For SASS, modifying core file means creating your own stylesheet that imports Bootstrap so you can modify and extend it. We recommend using a package manager like npm, which provides file structure that looks like this:
If downloaded from bootstrap source files and not using a package manager, we need to manually setup the structure, keeping Bootstrap’s source files separate as below:
Custom.scss, will be the file where we will import Bootstrap’s source SASS files. We can accomplish this in two ways:
1. Using @import for the entire Bootstrap
2. Using @import to pick the parts you need from Bootstrap
With this setup, we can begin to modify any SASS variable or map in the custom.scss.
FEATURES of SASS with BOOTSTRAP:
- Variable defaults
We include the !default flag allowing you to override the default value for the without modifying the source code of the Bootstrap.
- Maps and loops
We include a handful SASS maps, key value pairs that make it easier to generate families of related CSS. SASS maps are useful for colors, grid breakpoints and more.
Bootstrap utilizes several SASS functions, but only a subset of functions are applicable to general theming.
Various components and utilities are built through a series of colors defined in a SASS map. This map can be looped over in SASS to quickly generate a series of rule sets. Within variables.scss, you will find our color variables and the SASS map.
- SASS options
Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* SASS variables. Override a variable’s value and recompile with npm run test as needed.
Components and utilities are built with @each loops that iterate over a SASS map. This is especially helpful for generating variants of a component by our $theme-colors and creating responsive variants for each breakpoint. As you customize these SASS maps and recompile, you will automatically see your changes reflected in these loops.