Differencebetween CSS and SCSS

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

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.

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/

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.

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;

}

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 is the difference between CSS @import and SASS/SCSS @import?

@import in CSS: CSS has an import option that lets you split your CSS into smaller, more maintainable portions.

Whereas,

@import in SASS/SCSS: Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

For Example:

In _reset.scss

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

In base.scss

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

References: SASS Guide

Bootstrap-5 css files versus scss files

I believe what is ultimately rendered to the browser should be identical out of the box. The difference is that to serve the SCSS to the browser you have to have some build process in your development workflow that outputs the SCSS to CSS before serving it. There are, however, some benefits to using the SCSS files in your project, such as easier customization and access to mixins and helper utilities.