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