What's the Difference Between Scss and Sass

What's the difference between SCSS and Sass?

Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.

CSS variables are supported and can be utilized but not as well as pre-processor variables.

For the difference between SCSS and Sass, this text on the Sass documentation page should answer the question:

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

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.

What is the difference between CSS and SCSS?

In addition to Idriss answer:

CSS

In CSS we write code as depicted bellow, in full length.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

In SCSS we can shorten this code using a @mixin so we don’t have to write color and width properties again and again. We can define this through a function, similarly to PHP or other languages.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

In SASS however, the whole structure is visually quicker and cleaner than SCSS.

• It is sensitive to white space when you are using copy and paste,

• It seems that it doesn't support inline CSS currently.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color
  

Differences between SCSS and LESS

Both Sass and Less are CSS preprocessors.

From keycdn.com

A CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS.

So Sass and Less don't change the functionality of CSS, as they are compiled into plain old CSS. What they do is make it easier to write and maintain CSS with tools such as mixins, nesting, variables, and more.

SCSS, which stands for 'Sassy CSS' is one of two syntaxes for Sass.

From the sass reference:

The second and older syntax, known as the indented syntax (or sometimes just "Sass"), provides a more concise way of writing CSS.

The difference

Both Sass and Less have very similar features. Sass uses Ruby whereas Less uses Javascript. There are syntactical differences, for example, Sass uses $ for variables whereas less uses @.

There are some slightly more subjective differences, this website claims that "LESS Has More User-Friendly Documentation Than Sass", however personally I have found the Sass documentation and examples very easy to use.

Why we are using SASS, even we are using SCSS?

Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “.sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Files in the indented syntax use the extension .sass.

SCSS

$blue: #3bbfce;

$margin: 16px;

.content-navigation { 

  border-color: $blue;

  color: darken($blue, 9%);

}

.border {

  padding: $margin / 2; 

 margin: $margin / 2;

 border-color: $blue;

}

SASS

$blue: #3bbfce

$margin: 16px


.content-navigation

  border-color: $blue

  color: darken($blue, 9%)


.border

  padding: $margin / 2

  margin: $margin / 2

  border-color: $blue

CSS

.content-navigation {

  border-color: #3bbfce;

  color: #2b9eab;

}

.border {

  padding: 8px;

  margin: 8px;

  border-color: #3bbfce;

}

What's the difference between css, scss, sass, and less?

CSS is the language for styling web pages.

LESS, SASS and SCSS are pre-processors that allow a few additional features. They output a .css file for the website to use.

Is there a difference between sass and scss?

They are functionally equivalent but have a different syntax. From the SASS homepage:

[...] there is no functional difference between them. Use the syntax you prefer.

What's the difference between sass and scss commands in the terminal

Using the --help flag on your command would have given you your answer:

sass-convert:

$ sass-convert --help
Usage: sass-convert [options] [INPUT] [OUTPUT]

Description:
  Converts between CSS, Sass, and SCSS files.
  E.g. converts from SCSS to Sass,
  or converts from CSS to SCSS (adding appropriate nesting).

scss:

$ scss --help
Usage: scss [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.

sass:

$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.

What's the difference between Sass and Scss options in CodePen?

The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3's syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “Sass”).

Sass and SCSS differ in syntax, however, you can use both .scss and .sass extensions interchangeably as the SCSS processes will automatically know the difference, but thats not the case on codepen, you must specify the exact syntax you will write in.

#Sass syntax:

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius

.my-element
    color= !primary-color
    width= 100%
    overflow= hidden

.my-other-element
    +border-radius(5px)

#SCSS Syntax

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}

.my-other-element {
    @include border-radius(5px);
}

Read more here to see which syntax is better:
https://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

What is the name of the technology - SASS or SCSS, what would you write on your CV?

I'm sure the terms you are looking for are CSS-"superset" and CSS-"preprocessor".

Also there is not a huge difference between SASS and SCSS. One uses a so called "indented syntax" which means that you don't need curly braces and semi-colons.

So you really dodged a bullet when someone from a company says that "they are vastly different".

Difference between SCSS variables and CSS variables?

SCSS is a preprocessor. That means it is not CSS, but is converted into CSS at 'compile time'. In the resulting CSS code there is no resemblance to the original SCSS code. Hence you cannot change the variable values at CSS 'runtime'.

Historically SCSS is a fairly old technique. Actually it dates back to as far as 2007. It was invented by the motivation that CSS lacks certain features amongst which are variables (and nesting and loops and mixins etc.).

CSS variables are a quite recent addition to the CSS standard (The last call working draft seams to be from 2014). They didn't render SCSS variables useless, because you can do things to SCSS variables which you can't do with CSS variables (to my knowledge) like color calculations.

On the other hand you can do things with CSS variables that you can't do with SCSS variables like changing at runtime.

BTW: CSS variables are not the official jargon. They should be called custom properties. But everyone calls them variables.

Addendum 1

One difference I was not talking about. You can't change SCSS variables with JavaScript. CSS Custom Properties however can be accessed and changed with JS

Addendum 2

This article on CSS Tricks has a good overview: https://css-tricks.com/difference-between-types-of-css-variables/

---

Related Topics