SASS vs. SCSS
Share
Sass and SCSS are both syntaxes for the Sass
Sass (Syntactically Awesome Style Sheets) was introduced in 2006 and is the original syntax for the Sass preprocessor language. It uses indentation-based syntax instead of curly braces, which is designed to be more concise and easier to read than traditional CSS. However, some developers find the indentation-based syntax to be less intuitive, especially if they are already familiar with traditional CSS syntax.
SCSS (Sassy CSS) was introduced in version 3 of Sass and is a superset of CSS. It uses a syntax that is very similar to traditional CSS, making it easier for developers who are already familiar with CSS to pick up. SCSS is fully compatible with CSS, and any valid CSS is also valid SCSS.
Sass | SCSS |
Sass is utilized during development when adherence to its original syntax is required. | SCSS is used when there is no specific requirement of a code syntax to be used. |
Sass can be integrated in any kind of project since it is compatible with all versions of CSS. | SCSS can also be incorporated into any kind of project since it is a superset of CSS. |
Supports any operating system. | Supports cross-platform operating systems. |
Less syntactical constraints than SCSS. | Relatively more syntactical constraints. |
Much bigger community of contributors consisting of developers and designers. | Smaller community of contributors resulting in much less individual support. |
Licensed under MIT license. | Licensed under MIT license. |
Provides documentation in the form of SassDoc. | Provides inline documentation within the code. |
Coding example
Let's see how to use SCSS and Sass to style an HTML page.
The index.html file contains a div and a paragraph with some text in it. The sass_style.scss file contains styling for the div, while the scss_style.css file contains the style for the paragrpagh.
Both the Sass and SCSS files are compiled into CSS files using the SASS npm package. These CSS files are then linked to the index.html page in lines 3 and 4.
You can run the widget below to see the styling being applied to the HTML page. Moreover, you can also edit the SCSS and Sass files to experiment yourself.
<html>
<head>
<link rel="stylesheet" href="sass_style.css" />
<link rel="stylesheet" href="scss_style.css" />
</head>
<body>
<div>This div is styled with sass</div>
<p> This paragragh is styled with scss</p>
</body>
</html>Explanation
In the file, sass_style.sass:
Line 1: Define a variable called
font-stackwith a value ofHelvetica,sans-serif.Line 2: Define a variable called
primary-colorwith a value of#FF5733.Line 4: Set styles for all
divelements.Line 5: Set the font to be 100% of the
font-stackvariable.Line 6: Set the text color to be the value of the
primary-colorvariable.
In the file, scss_style.sass:
Line 1: Define a variable called
font-stackwith a value ofHelvetica,sans-serif.Line 2: Define a variable called
primary-colorwith a value of#6666ff.Line 4: Set styles for all
pelements.Line 5: Set the font to be 100% of the
font-stackvariable.Line 6: Set the text color to be the value of the
primary-colorvariable.
