Setting up Bootstrap SASS

What is Saas?

The CSS pre-processor SASS(Syntactically Awesome Stylesheet) helps to cut down on CSS repetition and saves time. It is a more powerful and stable CSS extension language that structurally describes page style. It was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006. Sass is free to download and use, and all CSS versions are compatible with it. The installation of Ruby is the only prerequisite for using it. Additionally, users are urged to adhere to the Sass Community Guidelines.

CSS might be entertaining on its own, but stylesheets are growing larger, more intricate, and more difficult to manage. A preprocessor can be useful in this situation. Nesting, mixins, inheritance, and other handy features that help you create robust, stable CSS are available in Sass but are not yet included in CSS.

Sass will take your preprocessed Sass file and save it as a standard CSS file that you can use on your website after you start playing with it.
In your terminal, you can accomplish this in the simplest method possible. Once Sass is installed, you can use the Sass command to compile your Sass to CSS. You must instruct Sass on which file to base its construction and where to generate CSS.

How to Use Saas with Bootstrap

The easiest way to use Saas with Bootstrap is bootstrap-saas. A Sass-powered version of Bootstrap 3 called bootstrap-sass is available for instant integration into Sass-powered projects.
You could choose between Less or Sass as CSS preprocessors up until Bootstrap version 3.x. However, as of version 4, Bootstrap solely employs Sass. Sass has advanced to the point where the source code for the Bootstrap 4 and 5 frameworks is entirely written in Sass.

Sass has two syntaxes available. The modern SCSS syntax (SCSS for Sassy CSS) employs curly braces similar to those in CSS, while the older one uses indentation.

A superset of CSS is SCSS. Therefore, CSS code with a .scss extension (or SCSS inserted between CSS) is also acceptable for use in Sass.

Installation

The prerequisites for the installation of bootstrap-sass are:

1. Node.js
2. A code editor, VS Code preferably.
3. A basic understanding of Sass

Visit this official Bootstrap website to download it. We will use the npm version after installing the node in our system.

• Use the Command:

  $ npm i bootstrap

The Sass compiler must also be installed. The official Dart-sass version is available on their website. You only need to download the dart-sass package, unzip it, and add it to the path (environment variables) whether you're using Windows, Mac, or Linux.

An npm package for Sass exists. Additionally, the Live Sass Compiler VS Code plugin has been downloaded more than 2 million times. Use whichever Sass compiler you're most familiar with.

• We are going to use the npm package called sass with the command:

  $ npm install bootstrap-sass

In the directory of node modules, there is a folder called Bootstrap that may be found after downloading Bootstrap and the Sass compiler.
Additionally, it contains the folders dist, js, and scss.

The Bootstrap JavaScript code is in js, all of the built CSS is in dist, and all of the Sass files are in the scss folder.

Configuration

Sass

• Additionally, you can directly import components. Copy the _bootstrap.scss file into your assets as _bootstrap-custom.scss to begin with a complete list of modules.
• Then remove the _bootstrap-custom components you do not want by adding a comment.
• Replace @import 'bootstrap' in the application Sass file with:
  @import 'bootstrap-custom';

Sass: Number Precision

• The minimum Sass number precision required by bootstrap-sass is 8. (default is 5).

• Using the sassc-rails gem automatically configures precision for Ruby. When using Ruby and npm or Bower, you can set it using:

Sass: Autoprefixer

• Autoprefixer must be used with Bootstrap. Utilizing Can I Use values, the autoprefixer adds vendor prefixes to CSS rules.

• To match the level of browser compatibility of upstream Bootstrap, set the browser's option of Autoprefixer to:

JavaScript

• All of the JavaScript for Bootstrap is concatenated in the right sequence and can be found in assets/javascripts/bootstrap.js.
• If any dependencies are needed, you can also load a single module. Dependencies are listed in the documentation for Bootstrap JS.

Importing Bootstrap Source SAAS Files

• Avoid making changes to the Bootstrap core files whenever possible. To expand and change Bootstrap with Sass, you must create your stylesheet and import it.

• If you're using npm as your package management, your file structure will resemble this:

• You'll import the Bootstrap source Sass files in your custom.scss. You can either choose to use the entirety of Bootstrap or just the components you require. Although there are some prerequisites and dependencies among our components, we promote the latter.

• For our plugins, you'll also need to add some JavaScript:

• Once everything is set up, you can start editing any of the Sass variables and maps in your custom.scss file. Additionally, you can begin to include Bootstrap components in the / Optional area as needed. As a starting point, we advise using the entire import stack from our bootstrap.scss file.

Variable Defaults

• Each Sass variable in Bootstrap has the !default flag, which enables you to override the variable's default value without changing the source code of Bootstrap. Change the values of the variables, copy and paste them if necessary, and get rid of the !default flag. The default values in Bootstrap won't reassign a variable if it has already been allocated.

• The scss/variables.scss file contains a complete list of all variables used by Bootstrap. Some variables are set to null; unless they are altered in your setup, they do not output the property.

• The import of our functions must come first, followed by the import of variable overrides.

• Here is an illustration of how importing and compiling Bootstrap using npm would alter the background-colour and colour for the <body>:

• Repeat as necessary for any Bootstrap variable.

Maps and Loops

A few Sass maps, or key-value pairs, are included in Bootstrap to make it simpler to create families of related CSS. For our colors, grid breakpoints, and other things, we use Sass maps. All Sass maps feature the! default flag and can be modified and expanded, just like Sass variables.

By default, some of our Sass maps have been combined into empty ones. This is done to make it simple to expand a specific Sass map but at the cost of making it slightly more challenging to remove objects from a map.

Modify Map

• The $ theme-colours map defines each variable as a separate entity. The following should be added to your own Sass file to change an existing color in our $ theme-colours map:

• These variables are later set in the $ theme-colours map of Bootstrap:

Add to Map

• By generating a new Sass map with your custom values and merging it with the original map, you can add new colours to $ theme-colours or any other map.

• Well in this instance make a fresh $ custom-colours map and combine it with $ theme colours.

Remove From Map

• Use map-remove to remove colours from $ theme-colours or any other map. Be aware that you must place it between our demands and choices:

Required Keys

Given that we utilised and extended these keys ourselves, Bootstrap expects that they exist in Sass mappings. You might get into issues where a specific Sass map's key is being utilised as you customise the provided maps.

For links, buttons, and form states, for instance, we use the primary, success, and danger keys from $ theme colours. These key values can be changed without causing any problems, although removing them might interfere with Sass compilation. You must change the Sass code that uses those values in these situations.

Functions

Colors

• Theme colours can be utilized independently as variables, like $primary, in addition to our Sass maps.

• The tint-colour () and shade-colour () functions in Bootstrap allow you to lighten or darken colours, respectively. Unlike Sass' native lighten() and darken() functions, which adjust the lightness by a defined amount and frequently don't produce the intended results, these functions will mix colours with black or white.

Color Contrast

• To achieve WCAG 2.0 accessibility standards for colour contrast, authors must provide a contrast ratio of at least 4.5:1, with very few exceptions.

• The colour contrast function, colour-contrast, is a further feature we have added to Bootstrap. It automatically returns a light (#fff), dark (#212529), or black (#000) contrast colour based on the selected base colour by applying the WCAG 2.0 algorithm for calculating contrast thresholds based on relative luminance in an sRGB colourspace. This function is extremely helpful for creating many classes in loops or mixins.

• To produce colour swatches, for instance, from our $theme-colours map:

• It can also be used for one-time contrast:

• Our colour map functionalities additionally allow for the specification of a base colour:

Escape SVG

For SVG background pictures, we utilize the escape-svg function to remove the <, >, and # characters. It is necessary to quote data URIs when using the escape-svg function.

Add and Subtract Functions

The CSS calc function is wrapped using the add and subtract functions. These functions' main goal is to prevent mistakes when a "unitless" 0 value is entered into a calculation statement. Despite being technically true, expressions like calc(10px - 0) will always result in an error.

• Example where the calc is valid:

• Example where the calc is invalid:

Mixins

Some CSS elements can be a pain to create, especially with CSS3 and all the available vendor prefixes. You can create groups of CSS declarations with a mixin that you want to reuse across your website. It keeps your Sass extremely dry. To make your mixin more versatile, you may even pass in values.

Here is a theme illustration:

SCSS Syntax:

CSS Output:

We have to use the @mixin directive and give it a name to construct a mixin. Our theme for mixins has a name. To pass in any theme, we are also using the variable $theme inside of parentheses. Your mixin can then be used as a CSS declaration by beginning with @include and the name of the mixin.

Creating an HTML File to Preview the Results

So finally we need an HTML file to preview the results.

Code:

Sass has not yet been assembled. Run Live Server to see the preset styles.

You can get the free extension from the VS Code extensions store if Live Server is not already installed.

What we observe is this:

Output:

It's time to put our unique Sass file together.

Simple syntax for the compilation :Place a colon between the source and destination folder names.

We're going to use this customised bootstrap stylesheet in place of the original bootstrap file.

Now restart the Live Server.

We have the website modified to reflect our updated style.