DEV Community

Arsalan Mlaik
Arsalan Mlaik

Posted on

CSS VS SCSS

here's a comparison of CSS and SCSS (Sass):

Aspect CSS SCSS (Sass)
Syntax Plain text with selectors and properties Extension of CSS with enhanced syntax
Variables Not supported Supported using $ prefix
Nesting Limited support with descendant selectors Fully supported with nesting
Mixins Not supported Supported with @mixin directive
Functions Not supported Supported with built-in and custom functions
Inheritance Not supported Supported with @extend directive
Importing Supported with @import Supported with @import
Comments Supported with /* */ Supported with // and /* */
Math operations Limited support for basic operations Fully supported with arithmetic operators
Code readability May require repetitive code Improved readability with variables, nesting, and mixins
File extension .css .scss or .sass

Please note that SCSS (Sass) is a superset of CSS, meaning you can write regular CSS within an SCSS file, so it's more versatile and developer-friendly. It allows you to use the features listed above to make your stylesheets more organized and maintainable.

Top comments (4)

Collapse
 
developedbyjk profile image
developedbyjk

Great Post @arsalanmee 👏🔮.
These Table were good for comparision!😁😎🔥

Collapse
 
arsalanmee profile image
Arsalan Mlaik

Thanx A Lot

Collapse
 
respect17 profile image
Kudzai Murimi

Thanks for sharing but l support CSS though

Collapse
 
arsalanmee profile image
Arsalan Mlaik

Thanks Kudzai for response!