CSS is the standard stylesheet language used directly by web browsers to style HTML content. It uses a plain-text syntax with braces and semicolons, and files use the .css extension.
SCSS (Sassy CSS) is a superset of CSS, meaning all valid CSS is also valid SCSS. It extends CSS with powerful features like variables, nesting, mixins, and functions, making stylesheets more maintainable and efficient. SCSS uses the .scss file extension and requires preprocessing to compile into standard CSS before being used by browsers.
Key Differences:
Syntax: CSS uses braces and semicolons; SCSS uses a more structured syntax with nesting and variables.
Features: SCSS supports variables, nesting, mixins, and inheritance—features not available in plain CSS.
Compilation: CSS is interpreted directly by browsers; SCSS must be compiled into CSS using a preprocessor like Sass.
Use Case: Use CSS for simple projects; use SCSS for larger, more complex projects where code organization and reusability are important.
SCSS is backward compatible with CSS—you can gradually adopt SCSS in existing CSS projects without rewriting everything.
I know CSS relatively well, but I am still very confused about Sass. How is SCSS different from CSS and if I would use SCSS instead of CSS would it work the same?
Videos
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.
I'm coding my 1st website and I was wondering which style sheet to use. What's the difference between these 3? Is any of them more supported than the other ones, even in way older browsers? Thanks!
Edit: Thanks for all the answers everyone, I get it now. I was just wondering which one of these I should use because I thought SASS seemed easier - no brackets and you can just edit an element's style within anothwr element's style (if that makes sense). But I am now aware that I should stick to "vanilla" CSS until I am very comfortable with it. Thank you once again. Great subreddit!
Just to give some examples, because that's often a neat way to explain the difference:
CSS (what the browser understands):
h1.foo {
background: red;
}
h1.foo .bar {
text-shadow: 0 1px red;
}SASS (compiles to CSS, supports things like nesting and variables):
$color: red
h1.foo
background: $color
.bar
text-shadow: 0 1px $colorSCSS (SASS, but written with a CSS-like syntax):
$color: red;
h1.foo {
background: $color;
.bar {
text-shadow: 0 1px $color;
}
}The latter two compile to CSS when you run them through a program. You then send the compiled files to the browser, since browsers only understand CSS.
The key to surviving in modern web development, and software development in general, is to keep things as simple as possible and only let them get more complex as needs require them to. This crap moves and changes way too fast to try and determine what to use at any given moment based only on what others seem to be doing, not to mention that their reasons for doing it that way may have no relation to what you're trying to do and so there's never a canonical "right" answer (and anyone saying otherwise has an agenda that you'd do well to stear clear of).
So, in your case, it's easy: use plain old CSS unless and until you need some specific thing that SASS or LESS gives you. Neither are required to be productive in any way, shape or form and in fact they seem to just get in the way if your project isn't of a sufficient complexity to make what they provide valuable of for no other reason than they introduce a new build step (the lesser the better).
You'll find out pretty quickly if you need variables for example. A lot of the times you really don't. But if you hit a wall with CSS and you think "gee, if I had variables then I could solve this easy" then it's time to migrate. That's how you know, simple. as that.
Until that point, KISS (Keep It Simple Stupid, in case you've never heard that).
