SCSS vs. CSS
Understanding the differences between SCSS and CSS
What is CSS
CSS is the default language that most programmers use to style a webpage. It is one of the 3 fundamental web technologies along with HTML and JavaScript. HTML manages the structure, JavaScript makes pages interactive, and CSS changes the style by taking a markup language like HTML and describes how it should be presented to the user.
body{
color: #0000FF;
font-family: Ariel, sans-serif;
font-size: 16px;
}This is an example of CSS that can be used to change body text of an HTML document
Can you guess what its changing style of the text to?
What is SCSS
SCSS is short for Sassy CSS. What SCSS does is very similar to CSS but the difference comes with the fact that SCSS extends the functionality of CSS while also making it simpler. What this allows us to do is it enables us to things like nested styling, functions, mixins, variables, inheritance (more on these later) and so on.
$blue: #0000FF;
body{
color: $blue;
font-family: Ariel, sans-serif;
font-size: 16px;
}This example is doing the same thing as the other code segment above but the difference being that here we defined the color as $blue which makes it much easier for us to recall later on. In fact, we have done this before, if you have been using the dark mode/midnight theme then go ahead and navigate your your _sass folder and check out the dark-mode.scss and you'll see something similar to the example above
So which one is better to use?
CSS tends to be better for really simple styling where not many complex or nested styles are required and small projects that doesn't require a lot of customization. SCSS on the other hand is very good for more complex styling and working with a project with more than one page where maybe lots of customization is needed.