Brave Search

What is the difference between CSS and SCSS?

stackoverflow.com › questions › 46400443 › 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

Answer from Hash on Stack Overflow

GeeksforGeeks

geeksforgeeks.org › css › what-is-the-difference-between-css-and-scss

Difference Between CSS and SCSS - GeeksforGeeks

08:34

CSS is a stylesheet language whereas SCSS is a preprocessor scripting language that is a superset of CSS.

Published January 15, 2025

Stack Overflow

stackoverflow.com › questions › 46400443 › what-is-the-difference-between-css-and-scss

sass - What is the difference between CSS and SCSS? - Stack Overflow

CSS

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

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

SCSS

$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

2 of 6

CSS is the styling language that any browser understands to style webpages.

SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser, and for information, SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster.
SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand.

Discussions

What is the difference between CSS and SCSS?

scss is a dsl (domain specific language) that actually produces css. It is basically a css pre-processor. It has nicer features then css. More here: https://sass-lang.com/guide More on reddit.com

r/AskProgramming

April 6, 2021

What is SCSS and where to learn it

Hello, I have seen that the knowledge of SCSS is desirable by employers but I am very confused about. I know that there is SASS but I’m not sure what SCSS is. Is the same library but two different names or two separate libraries? More on forum.freecodecamp.org

forum.freecodecamp.org

April 14, 2021

Explain Like I'm Five: What is SASS and LESS?

I'll try to give a simpler explanation, since kevan pointed out that menno's was a little high-level. SASS and LESS are just like CSS except with lots of shortcuts to write things in a much shorter way that you would with just CSS. The simplest example is using a variable. You can write "$brand_color: #FF0000" at the top of your SASS file, and then later on use $brand_color exactly like you would use the hex color like #FF0000. This is most useful when you use it in several places: then if your client decides his brand color is now #00FF00, you just need to change "$brand_color: #FF0000" to "$brand_color: #00FF00" once and that's it. Otherwise you would have to track down every place you used the brand colour and change them individually. You can set more complicated things called mixins too. A common example is to define a mixin called button, which you would use whenever you want to define a button. Mixins are very powerful because they can be modified by parameters. This means that if you realise that the CSS you wrote for two different buttons is identitical apart from some widths, because one button is bigger than the other, you could write a mixin that takes this number as an argument, and then you would not need to repeat yourself. Nesting is really nice because it means you write less. It's hard to explain, just look at the example on the SASS homepage . Because these are all "shorthands" for longer CSS, you need to first turn your SASS file into an actual CSS file, which just consists of expanding your SASS shortcuts into real CSS. For example whenever it encounters @text_color, it replaces it with #FF0000. This is called the compilation step; it is a program on your computer that you need to run, which outputs your CSS file. More on reddit.com

r/css

July 8, 2013

CSS, SCSS, SASS?

Thank you, will do :)

Videos