Some useful differences between CSS and SCSS

CSS is the styling language which is used to style web pages. Initially, CSS was written to style the HTML pages which grows more and more in the line of codes if the HTML pages increases.

As the project gets bigger, maintenance & readability of CSS code gets harder. CSS causes some problems like:

• Big effort for little changes
• Difficulties in structuring the code
• Code repetition
• Unlimited lines of CSS classes & rules

CSS Preprocessor

A preprocessor helps us to deal with the above problems. It has some advantages over regular CSS. First, define what is a CSS preprocessor? A program/tool that has its own syntax that gets compiled later in standard CSS code. A preprocessor has its own syntax to write easier as well as cleaner CSS code. Later, it gets rendered in a separate file to standard CSS, because browsers don’t understand the syntax. There are completely different preprocessors like Sass, Less, and Stylus.

SCSS

Sass (Syntactically Awesome Style Sheets) has two syntaxes. The most usually used syntax is understood as “SCSS” (for “Sassy CSS”) and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser. Using SCSS, we can add much additional functionality such as variables, nesting and more.

Difference between CSS and SCSS

Feature #1: Nesting

Standard CSS doesn’t support nesting. We can’t write a class inside another class. As the project gets bigger, this brings a readability problem and the structure doesn’t look nice.

Feature #2: Variables

Like in other programming languages, we can use variables to store values and reuse them later.

 

/* SCSS */

$text-color: #f443a5;
body {
color: $text-color;
}

Feature #3: Mixins

Mixins are Scss functions that group CSS declarations together. We can repeat them later like variables. We can see some differences in the code below.

   /* SCSS */

$pink: #F443a5;
$margin: 20px;


.container {
border-color: $pink;
color: darken($pink, 10%);
width:300px; 
height:300px;
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $ pink;
}

We can see from the CSS below that the SCSS style is a lot more similar to regular CSS.

/* CSS */

.container {
border-color: #F443a5;
color: #F443a5;
  width:200px;  
   height:200px;
}
.border {
padding: 8px;
margin: 8px;
 border-color: #F443a5;
}

 

Advantages of using Scss:

The main advantage of using Scss is to save time and make writing CSS easier. You can use variables for unremarkably documented things like color, font-family, margin, etc.

Some handy features Scss provided are:

1. Variables, by which you can store reusable values with variables, this can be handy to store values like color hex code or a font stack.
2. Nesting, just write it in nests just like what we do with HTML elements. CSS rules can be nested within each other.
3. Partials, we can write our stylesheet in a modular way using partials and import statements.
4. Mixins, In SCSS we can shorten the code using a @mixin so we don’t have to write properties repeatedly.
5. Extension and Inheritance, an easy way to derive the same properties of another selector.
6. Mathematical Operators, allows us to do math using operators. We can perform straightforward calculations within our code for higher output.