What is CSS?  CSS stands for Cascading Style Sheet. We can use it as a scripting language for developing and creating different web pages.It is well like web technology mostly used with HTML and JavaScript. CSS styles are saved in separate files with the .css extension. It is designed to separate content and presentation, like Layout, fonts, and colors.  By separating the content (HTML) from its presentation(CSS), web developers can create consistent and visually appealing designs across multiple pages and ensure a better experience.   What is SCSS? SCSS stands for sassy Cascading Style Sheets. It is a more advanced and evolved variant of the CSS language.It adds additional functionality to CSS and gives web developers more flexibility and power when creating web designs.SCSS contains file extension as .scss. SCSS is a part of the larger Sass (syntactically Awesome Stylesheets) language, which was created to explore the capabilities of traditional CSS. We can add some extra features to CSS using SCSS, like Variables, Nesting, and many more. using these features, we can write the SCSS in a much simpler and quicker way than writing the standard CSS.    Differences between CSS and SCSS: 1. Syntax: Plain text is used for CSS whereas more structured syntax with additional features is used for SCSS. 2. Variables: SCSS allows you to define variables to store commonly used values like font sizes, color, and spacing, whereas CSS does not. CSS example: body{ color: #ffffff; font: $section-font: 'Arial','sans-serif'; font-size: xx-large; padding: 2rem; } SCSS example: $white: #ffffff; $section-font: $section-font: 'Arial', sans-serif; body { color: $white; font: $section-font; font-size: xx-large; padding: 2rem; }   3. Nesting: SCSS language promotes rules that are properly nested whereas regular CSS language does not assign various nested rules. SCSS example: .parent-selector { .child-selector { // Styles for child selector } } .container { width: 100%; h1 { color: blue; font-size: 24px; } } Benefits of Using Nesting in SCSS: 1. Improved Readability: Nesting allows for more organized code structure, making it easier to read and understand the styles. 2. Reduced Repetition: The user can avoid repetitive code by addressing parent elements directly, saving time and effort. 4. Mixins: Mixins are like functions in programming languages, SCSS allows to creation and reuse of code snippets using mixins. CSS example: nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { display: inline-block; margin-left: -2px; margin-right: 2em; } SCSS example: @mixin reset-list { margin: 0; padding: 0; list-style: none; } @mixin vertical-list { @include reset-list; li { display: inline-block; margin: { left: -2px; right: 2em; } } } nav ul { @include vertical-list; } Arguments: Mixins can also take arguments, which allows their behavior to be customized every time they are called. The arguments are specified in the @mixin rule after the mixin's name, as a list of variable names surrounded by parentheses. CSS example: .sidebar { float: left; } [dir=rtl] .sidebar { float: right; } SCSS example: @mixin rtl($property, $ltr-value, $rtl-value) { #{$property}: $ltr-value; [dir=rtl] & { #{$property}: $rtl-value; } } .sidebar { @include rtl(float, left, right); } 5. File Extension: CSS files use the .css file extension, whereas SCSS files use the .scss file extension. 6. Compilation: CSS files are interpreted by web browsers directly, whereas SCSS files must be preprocessed into standard CSS files using a preprocessor such as Sass. 7. Language Used: SCSS is mostly used in the Ruby language while CSS is mostly used in the HTML and JavaScript languages.

The Bootstrap 5 alpha version has been released on June 16, 2020. You can check the official page for Bootstrap 5 alpha. Bootstrap is a free and open-source most popular CSS framework for website and web applications. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.HTML- and CSS-based design templates for different components of a website or application such as models, forms, buttons, navigation, accordion, tabs, typography and other interface components with helpful JavaScript extensions. A bootstrap is a powerful tool for whatever type of website and web application you are trying to build. The following are some of the expected changes in Bootstrap 5: jQuery could get removed As we all know, Bootstrap has made this decision long before. The team had opened a pull request in 2017 aiming to remove jQuery entirely from bootstrap versions, and now in bootstrap 5 alpha it is done and replaced entirely.   Switch to Vanilla JavaScript JavaScript is currently dominating the modern web development community. Almost all modern web browsers on consoles, desktops, games, tablets, and mobile phones include JavaScript interpreters. Therefore, it's geared up to become the universal scripting standard of the global.  As a result, this will improve the size and weight of the files and libraries used by the framework.   Responsive Font Sizes (RFS) Bootstrap 5 alpha enables responsive font sizes by default. That will automatically resize the typography element according to the size of the user’s viewport through RFS engine or Responsive Font Sizes. As per RFS repository, RFS is a unit resizing engine. Furthermore, RFS offers the ability to resize every value for any CSS property with units, like padding, margin, box-shadow, or border-radius.   Enhanced grid system Bootstrap 5 alpha isn’t a complete departure from v4. Developers of the first alpha have made sure that everyone can be able to upgrade to this future version more easily. Here’s a rundown of what’s new in the grid system: New grid tier: XXL ≥1400px .gutter classes have been replaced with .g* utilities. Vertical spacing classes. Columns are no longer position: relative by default. Form layout options are replaced with the new grid system. Also, options for your grid gutter spacing are added.            Here’s a quick example of how to use the new grid gutter classes: <div class="row g-5">   <div class="col">...</div>   <div class="col">...</div>   <div class="col">...</div> </div> Drop Internet Explorer 10 and 11 support Well, Internet Explorer was talk of the town when it was released as it was the only browser to support Java applets and CSS. Although it is no longer relevant with Chrome, Firefox, and Edge as it doesn’t support modern JavaScript standards and CSS properties anymore. Which limits your web design potential. Hence, Bootstrap 5 alpha decided to drop the support for IE 10 and 11.   Improved customizing docs There are some good improvisations in the documentation. Like, removing ambiguity,  giving more explanation, and providing much more support for extending Bootstrap. It all starts with a whole new Customize section. The color palette is expanded in v5, too. With an extensive color system built-in, you can more easily customize the look and feel of your app without leaving the codebase. There is an improvisation in color contrast, too. Also, they have provided color contrast metrics in Color docs. Hopefully, this will continue to help make Bootstrap-powered sites more accessible to folks all over.   The custom SVG icon library With Bootstrap 3, there were 250 reusable icon components in the font format called ‘Glyphicons”.  After that, with Bootstrap 4, it was scrapped. Because of that developers had to rely on free icon fonts or their SVG (Scalable Vector Graphic) icons to add value to their web designs. However, with Bootstrap 5 alpha, they introduced a brand new SVG icon library, which adds a fresh touch. These icons are brilliantly crafted by @Mark Otto, co-founder of Bootstrap, himself.   Adding CSS custom properties As mentioned, Bootstrap 5 alpha has begun using CSS custom properties thanks to dropping support for Internet Explorer. In v4 there were only a handful of root variables for color and fonts, and now developers have added them for a handful of components and layout options. For example table component, there are a handful of local variables to make striped, hoverable, and active table styles easier .table { --bs-table-bg: #{$table-bg}; --bs-table-accent-bg: transparent; --bs-table-striped-color: #{$table-striped-color}; --bs-table-striped-bg: #{$table-striped-bg}; --bs-table-active-color: #{$table-active-color}; --bs-table-active-bg: #{$table-active-bg}; --bs-table-hover-color: #{$table-hover-color}; --bs-table-hover-bg: #{$table-hover-bg}; // Styles here... }   Improved Utilities API  Well, this is by far the most interesting aspect of Bootstrap 5 alpha.  A brand new utility API. By using the utility API from Bootstrap you have unlimited possibilities to create utility classes for positioning, spacing, sizing, and so on. For example, you will be able to easily expand the number of `m-*`, `p-*` classes, and so on without writing custom Sass code to expand them. Here’s an example showing us how the $ utility variable can be expanded by adding multiple values: $utilities: () !default; $utilities: map-merge(   (     // ...     "width": (       property: width,       class: w,       values: (         25: 25%,         50: 50%,         75: 75%,         100: 100%,         auto: auto       )     ),     // ...     "margin": (       responsive: true,       property: margin,       class: m,       values: map-merge($spacers, (auto: auto))     ),     // ...   ), $utilities); We think this will be a game-changer for those who build on Bootstrap via source files, and if you haven’t built a Bootstrap-powered project that way yet, your mind will be blown.    Migrating the documentation from Jekyll to Hugo If you know how WordPress, Drupal, or Joomla works, then, you might be aware of how Jekyll works. Well, Jekyll is a free and open-source static site generator. Besides, it is useful to build websites with easy to use navigation, website components and generates all the content at once. However, Bootstrap 5 alpha is all set to step up its game and is switched to Hugo.  As it is a fast and flexible static site generator.   CONCLUSION One of the frustrating experiences of being a developer is reinventing the base HTML, CSS, and JavaScript for each project. While some prefer to write their code, it still makes sense to just use an existing framework like Bootstrap. With the all-new updates that came with Bootstrap 5 Alpha, We can surely say that the Bootstrap team is making very progressive steps to make the framework simple, lightweight, faster, useful, and more responsive for the developer’s benefit.   RELATED BLOGS: Easy jQuery Trick