SCSS: CSS WITH SUPERPOWERS

Understanding CSS and SCSS

CSS (Cascading Style Sheet) is a scripting language. Web page design along with HTML and Javascript make use of CSS. It is the most often used web technology and has a file extension of .css.

SCSS (Sassy CSS) is the superset of CSS. In other words, it is a CSS preprocessor that lets one use interesting functionalities that makes writing CSS much more powerful. SCSS is, therefore, an excellent choice for developers due to the features of CSS and more. Due to its advanced features, it is often termed – Sassy CSS and has a file extension of .scss.

Picture Credits: Mugo Web

Differentiating SCSS and SASS

SCSS	SASS
SCSS is the main syntax for the SASS, which builds on top of the existing CSS syntax.	SASS-Script is itself a scripting language.
Similar to CSS (uses curly braces and semicolons)	SASS has a loose syntax with white space and no semicolons.
Any valid CSS is valid SCSS.	CSS code cannot be used as SASS.
File extension is .scss	File extension is .sass

Example of SCSS

Example of SASS

Comments in SCSS

Both // (single-line) and /* */ (multi-line) comments are allowed in SCSS.

CSS vs SCSS 

We can add many extra features to CSS using SCSS, including variables, nesting, and more. All these added features make it much easier and quicker to write the CSS compared to standard CSS. SCSS executes the files on the web app server, producing typical browser understandable CSS.

Also, It is compatible with all versions of CSS. So, one can use any available CSS libraries. It is entirely CSS fit. You can rename a CSS file as a .scss extension, and it will also work. Because it adheres to the syntax of CSS, it is easy to learn and use.

One cannot write a class inside another class. As the project grows in size, readability issues arise, and the structure becomes unappealing. Although SASS allows for comments, any skilled developer will prefer the inline documentation provided by SCSS. We can add additional functionality to the code with SCSS by using variables, selectors, and nesting, which are not available in CSS.

6 Superpowers of SCSS

1. OPERATORS: Scss provides several helpful operators for working with values. These include mathematical operators like +/- and *, and operators for various other types.
2. VARIABLES: Variables let you automate repetitive tasks, do complex calculations, set up libraries, and much more.
3. NESTING: You can “nest” your CSS selectors in a way that follows the hierarchy of your HTML. It works for pseudo-classes and pseudo-elements.
4. MIXINS ( with and without parameters/arguments ): Mixins allow you to create reusable styles that may be used across your CSS. It is like a javascript function that can be used again and again. They also make it simple to avoid using non-semantic classes.
5. PARTIALS: Make partial Scss files with tiny CSS snippets that you may use again in other Sass files. It becomes easier to manage your project by allowing you to modularize your CSS.
6. INHERITANCE: Using @extend lets you share a set of CSS properties from one selector to another. This saves time and helps you better organize your code.

Operators

Without using the CSS calc() function, you can perform various math operations in SCSS. For computations, you can utilize +,-,/,*, %, direct values, and variables.

Variable

Styling codes make use of color repetitions and other components like typefaces.. SCSS provides variables to specify these re-used attributes in one location. Instead of duplicating the color value, we may declare a color under a variable name and utilize the variable name elsewhere in the project.

Variable declaration:

Variable usage:

Nesting: All parents and children styles are between curly braces, so one does not need to find them in the file or multiple files. One can write less code, so there is no repetition.

Using & in nesting

The parent selector, &, is a Sass-invented distinctive selection that refers to the outer selector in nested selectors. It allows you to reuse the outer selector in more advanced ways, such as adding a pseudo-class or a selection before the parent.

Mixins: The syntax of mixin is identical to that of JavaScript functions. Use the @mixin directive instead of the function keyword. We can also have arguments. The @include statement is used to call the mixin.

• Mixins with arguments:

Partials:

SCSS Partials is a fantastic approach to arrange your CSS code into separate files and then utilize it as needed.

Make a partial stylesheet in SCSS, with a name that starts with the underscore character, for example. _partial.scss.

Because the underscore character in front of the stylesheet name indicates that this is a tiny section of CSS, there is no need to compile it separately to CSS.

Inheritance:

The @extend feature of Sass allows classes to share a set of properties with one another. In complicated CSS where many classes are put together, duplication of properties may occur. The @extend features reduce the size of your code and facilitate you to rewrite it repeatedly.

Disadvantages of SCSS:

1. Debugging – When debugging code, preprocessors have a compilation phase that renders the code lines in CSS meaningless. However, debugging is twice as difficult as programming, which is a significant disadvantage.
2. Large CSS Files – While the source files may be small, the CSS output may be enormous. Even though preprocessors have grown more widely used, there is still a knowledge gap in CSS. There is a tremendous difference between knowing how to use a tool and utilizing it.
3. Loss of Benefits — Using SASS may result in the loss of the built-in element inspector in the browser.

Conclusion:

Stylesheets tend to get more sophisticated and bigger as a web application grows. The ability to nest CSS would be a lifesaver for everyone involved in improving readability in such a project. That isn’t possible using CSS. Flow control rules are not supported by CSS. SCSS comes pre-loaded with @if, @else, @each, $for, and @while flow control rules. One will be able to write less and cleaner code as a result of this.SCSS offers the usual set of numeric operators for numbers out of the box, but CSS requires the usage of the calc() function for numeric operations. 

As a result, even with the newest CSS capabilities, SCSS remains the best alternative, in my opinion.

– Chetna Grover

Advertisement