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)
Great Post @arsalanmee 👏🔮.
These Table were good for comparision!😁😎🔥
Thanx A Lot
Thanks for sharing but l support CSS though
Thanks Kudzai for response!