SCSS vs. CSS syntax differences

SCSS (Sassy CSS) is an extension of CSS that introduces advanced features and a more flexible syntax for writing stylesheets. While SCSS is fully compatible with CSS, it offers several enhancements that make it easier to write, maintain, and reuse styles. This article will explore the key syntax differences between SCSS and CSS, providing practical examples to illustrate these differences.

Variables

One of the most significant differences between SCSS and CSS is the use of variables. Variables in SCSS allow you to store values (such as colors, fonts, and sizes) in a variable and reuse them throughout your stylesheet. This makes it easier to manage and update your styles.

CSS:

body {
  background-color: #3498db;
  color: #fff;
}

SCSS:

$primary-color: #3498db;
$text-color: #fff;

body {
  background-color: $primary-color;
  color: $text-color;
}

Nesting

SCSS allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. This makes your CSS more readable and easier to manage. In contrast, CSS does not support nesting, requiring you to write each selector separately.

CSS:

nav ul {
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
}

SCSS:

nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        text-decoration: none;
      }
    }
  }
}

Mixins

Mixins in SCSS allow you to create reusable chunks of CSS that you can include in your stylesheets. Mixins can also accept arguments, making them incredibly flexible and powerful. CSS does not support mixins natively, so you would need to repeat code or use preprocessor-specific solutions.

CSS:

.button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.button-primary {
  background-color: #2980b9;
}

SCSS:

@mixin button-style($color, $bg-color) {
  background-color: $bg-color;
  color: $color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.button {
  @include button-style(#fff, #3498db);
}
.button-primary {
  @include button-style(#fff, #2980b9);
}

Inheritance

SCSS allows you to share a set of CSS properties from one selector to another using the @extend directive. This promotes the DRY (Don't Repeat Yourself) principle by reducing code duplication. In CSS, you would need to repeat the properties or use other techniques to achieve similar results.

CSS:

.message {
  padding: 10px;
  border: 1px solid #ccc;
  color: #333;
}
.success {
  padding: 10px;
  border: 1px solid green;
  color: #333;
}
.error {
  padding: 10px;
  border: 1px solid red;
  color: #333;
}

SCSS:

.message {
  padding: 10px;
  border: 1px solid #ccc;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}

Functions and Operations

SCSS provides a range of built-in functions for manipulating colors, numbers, strings, and more. These functions can help you create more dynamic and flexible styles. CSS does not natively support functions or operations, requiring workarounds for similar functionality.

CSS:

.box {
  width: calc(100% - 20px);
  color: rgb(51, 51, 51);
}

SCSS:

$padding: 20px;
$base-color: #333;

.box {
  width: calc(100% - #{$padding});
  color: $base-color;
}

Fun Facts and Little-Known Insights

• Fun Fact: The name "Sass" stands for "Syntactically Awesome Stylesheets," highlighting its goal to improve and extend the capabilities of standard CSS.
• Insight: SCSS is a superset of CSS, meaning any valid CSS code is also valid SCSS code. This makes it easy to integrate SCSS into existing projects.
• Secret: SCSS has an extensive ecosystem of libraries and frameworks, such as Bourbon and Compass, that provide additional functionality and help streamline your development process.
• Trivia: SCSS has a built-in command-line interface (CLI) that allows you to compile your SCSS files into CSS, making it easy to integrate into your build process.
• Hidden Gem: SCSS supports advanced features like loops and conditional statements, enabling you to write more dynamic and flexible styles.

Conclusion

SCSS offers a range of powerful features that enhance the capabilities of standard CSS. With variables, nesting, mixins, inheritance, and functions, SCSS makes it easier to write, maintain, and reuse styles. Understanding the syntax differences between SCSS and CSS allows you to take full advantage of these features and improve your workflow. Embrace the power of SCSS to create more efficient and flexible stylesheets.