DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Difference b/w SASS & SCSS
Moazam Ali
Moazam Ali

Posted on • Updated on

Difference b/w SASS & SCSS

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that is compiled or interpreted into CSS. It has syntax advancements. The use of math and variable support make CSS more powerful.

SASS has two syntaxes:

  • Newer: SCSS (Sassy Cascaded Style Sheets)
  • Older: Original SASS (Syntactically Awesome Style Sheets)

So they are both the SASS pre-processors with two different possible syntaxes. However, all this works only with the SASS pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.

Original SASS

  • SASS is the older css pre-processor with indented syntax.
  • It has syntax similar to Ruby.
  • Lesser syntax constraints
  • No Braces {}
  • Follows Strict Indentation
  • No Semicolons ;
  • File extension is .sass
  • To create mixin it uses = sign
  • To use mixin it precedes with the + sign
  • Greater designer and developer community

SCSS

  • SCSS is a superset of CSS3 syntax.
  • SCSS has syntax similar to CSS.
  • Every valid CSS3 stylesheet is valid SCSS as well.
  • More syntax constraints
  • Uses Braces {}
  • Uses Semicolons ;
  • File extension is .scss
  • To create mixin it uses @mixin directive
  • To use mixin it precedes with the @include directive
  • Smaller designer and developer community

SASS Example

$prim-color: red

=my-border($sec-color)
  border: 1px solid $sec-color

body
  background: $prim-color
  +my-border(green)

p
  color: $prim-color
Enter fullscreen mode Exit fullscreen mode

SCSS Example

$prim-color: red;

@mixin my-border($sec-color) {
  border: 1px solid $sec-color;
}

body {
  background: $prim-color;
  @include my-border(green);
}

p {
  color: $prim-color;
}
Enter fullscreen mode Exit fullscreen mode

Output CSS

body {
  background: red;
  border: 1px solid green;
}

p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
thomasbnt profile image
Thomas Bnt

Hello ! Don't hesitate to put colors on your codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks

Collapse
 
moazamdev profile image
Moazam Ali Author

Really appreciate your comment, I will be putting colors to my code blocks, Thanks Thomas ❀️

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.