Web Development

What is SCSS? Difference between CSS, SCSS and Sass

Sani Philip | | 2 min read

What is SCSS?

SCSS, also known as Sassy CSS is one of the two syntax available to write Sass. Sass is a popular CSS preprossing language to generate CSS files.

With Sass, you can reduce the number of times you repeat yourself and ensure you’re writing clean, maintainable code for the future. It also allows us to do math using operators. We can perform simple calculations inside our code for better output.

What is the difference between two Sass syntax?

As per the Sass documentation

 

 

SCSS

The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well. Because of its similarity to CSS, it’s the easiest syntax to get used to and the most popular.

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

 Indented syntax for Sass

The indented syntax was Sass’s original syntax, and so it uses the file extension .sass. Because of this extension, it’s sometimes just called “Sass”. The indented syntax supports all the same features as SCSS, but it uses indentation instead of curly braces and semicolons to describe the format of the document.

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none

Difference Between CSS and Sass

CSS is a W3C standard that lets users style web pages. Sass is a CSS preprocessing language. As browsers do not natively support Sass, it needs to be translated to CSS before you include it in your final HTML.

Note: SCSS is just a syntax used to create code in Sass.

 

 

Related Topics