Back in the days, people used to have a number of problems while writing CSS. SCSS (Sassy CSS) which is the most commonly used syntax for CSS was derived from SASS (Syntactically Awesome Style Sheets). SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser.
SCSS is like CSS with better formatting.
SCSS is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss
Being an extension of CSS3, in SCSS, we can add nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
CSS or SCSS – Which is better?
CSS is the styling language which is used to style web pages and it is understandable by the browser. Using SCSS, we can add many additional functionality to CSS such as variables, nesting and more. All these additional functionalities can make writing CSS much easier and faster as compared to writing the traditional CSS. SCSS produce a traditional CSS that the browser can understand by running the SCSS files on the server running your web app.
Advantages of using SCSS?
SCSS is more expressive
We can compress several lines of code in SASS syntax into much less number of lines of SCSS. In SCSS, the standard lines can also be compressed when I’m doing something complicated and can be expanded again for reference.
It encourages proper nesting of rules
If you use the comma operator at a high level, it increases the file size of the final CSS. This can result in making the code really hard to perform overriding of rules.
SCSS allows the user to write better inline documentation
SASS is flexible with comments, but any good developer will prefer inline documentation which is available in SCSS. Inline documentation makes the lines of code self explanatory.
Integrating existing CSS tools and CSS codebase is much easier
Syntax highlighting widely used CSS tool and is supported in SCSS. SCSS allows you use the existing code, and help improve its internal structure without altering the external behavior of the code.
Additionally, SCSS allows us to declare and define variables, which finally helps us to normalize the code and reduce the redundancy. For example,
- Instead of repeating #ff0000 many times in your CSS file, in SCSS, we can just set $red: #ff0000 once and use it as many times as we want.
- SCSS also supports the use of custom functions which accept parameters and are used to prevent unused repetitions.These functions are known as mixins.
- We can also inherit the properties of one selector into other selector by making use of extensions.
- SCSS allows us to do math using operators. We can perform simple calculations inside our code for better output.
