What is the difference between SCSS and SASS ?
SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax. It makes use of semicolons and brackets like CSS (Cascaded Style Sheets).
SASS and SCSS can import each other. Sass actually makes CSS more powerful with math and variable support.
Let’s list down the main difference between SASS and SCSS.
- SASS is used when we need an original syntax, code syntax is not required for SCSS.
- SASS follows strict indentation, SCSS has no strict indentation.
- SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS style and use of semicolons and braces are mandatory.
- SASS file extension is .sass and SCSS file extension is .scss.
- SASS has more developer community and support than SCSS.
- SASS supports SassDoc to add documentation whereas SCSS allows inline documentation.
- SASS can’t be used as CSS and vice-versa whereas a valid CSS code is also a valid SCSS code.
- SASS is hard to add to existing CSS projects whereas SCSS can be added easily to an existing CSS project just by adding new code.
/* .scss file */
/* Use the variables */
/* now this can apply resulting html file */
/* SASS */
/* CSS */
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses
are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!