CSS v/s SCSS - Key Difference of CSS and SCSS with Examples

What is CSS? 

CSS stands for Cascading Style Sheet. We can use it as a scripting language for developing and creating different web pages.It is well like web technology mostly used with HTML and JavaScript.

CSS styles are saved in separate files with the .css extension. It is designed to separate content and presentation, like Layout, fonts, and colors.

 By separating the content (HTML) from its presentation(CSS), web developers can create consistent and visually appealing designs across multiple pages and ensure a better experience.
 

What is SCSS?

SCSS stands for sassy Cascading Style Sheets. It is a more advanced and evolved variant of the CSS language.It adds additional functionality to CSS and gives web developers more flexibility and power when creating web designs.SCSS contains file extension as .scss.

SCSS is a part of the larger Sass (syntactically Awesome Stylesheets) language, which was created to explore the capabilities of traditional CSS.

We can add some extra features to CSS using SCSS, like Variables, Nesting, and many more. using these features, we can write the SCSS in a much simpler and quicker way than writing the standard CSS. 
 

Differences between CSS and SCSS:

1. Syntax: Plain text is used for CSS whereas more structured syntax with additional features is used for SCSS.

2. Variables: SCSS allows you to define variables to store commonly used values like font sizes, color, and spacing, whereas CSS does not.

CSS example:

body{
    color: #ffffff;
	font: $section-font: 'Arial','sans-serif';
	font-size: xx-large;
	padding: 2rem;
}

SCSS example:

$white: #ffffff;
$section-font: $section-font: 'Arial', sans-serif;
body {
	color: $white;
	font: $section-font;
	font-size: xx-large;
	padding: 2rem;
}

 

3. Nesting: SCSS language promotes rules that are properly nested whereas regular CSS language does not assign various nested rules.

SCSS example:

.parent-selector {
    .child-selector {
		// Styles for child selector
	  }
	}
	
	.container {
	  width: 100%;

	  h1 {
		color: blue;
		font-size: 24px;
	  }
	}

Benefits of Using Nesting in SCSS:

1. Improved Readability: Nesting allows for more organized code structure, making it easier to read and understand the styles.
2. Reduced Repetition: The user can avoid repetitive code by addressing parent elements directly, saving time and effort.

4. Mixins: Mixins are like functions in programming languages, SCSS allows to creation and reuse of code snippets using mixins.
CSS example:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

SCSS example:

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin vertical-list {
  @include reset-list;
  li {
	display: inline-block;
	margin: {
	  left: -2px;
	  right: 2em;
	}
  }
}
nav ul {
  @include vertical-list;
}

Arguments: Mixins can also take arguments, which allows their behavior to be customized every time they are called.
The arguments are specified in the @mixin rule after the mixin's name, as a list of variable names surrounded by parentheses.

CSS example:

.sidebar {
  float: left;
}
[dir=rtl] .sidebar {
  float: right;
}

SCSS example:

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;
  [dir=rtl] & {
	#{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

5. File Extension: CSS files use the .css file extension, whereas SCSS files use the .scss file extension.

6. Compilation: CSS files are interpreted by web browsers directly, whereas SCSS files must be preprocessed into standard CSS files using a preprocessor such as Sass.

7. Language Used: SCSS is mostly used in the Ruby language while CSS is mostly used in the HTML and JavaScript languages.