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
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.