SCSS

Sass (Syntactically Awesome Stylesheets) is a preprocessor scripting language that extends CSS by adding variables, nesting, mixins, and other advanced features. SCSS (Sassy CSS) is one of the two syntaxes of Sass, the other being the indented syntax. SCSS uses block formatting like CSS, with braces to denote code blocks and semicolons to separate rules within a block. This syntax is designed to be fully compatible with standard CSS, allowing developers to use any valid CSS code within an SCSS file.

$primary-color: #3498db;
$font-stack: 'Arial', sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}

.navbar {
  background: #333;
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

$bg-color: #f4f4f4;

@import 'variables';
body {
  background: $bg-color;
}

Features of SCSS

• Variables: Store reusable values like colors, fonts, and spacing for consistent styling across a project.
• Nesting: Write cleaner, hierarchical styles by nesting selectors within one another.
• Mixins: Create reusable blocks of styles that can be included in multiple places.
• Partials and Imports: Organize styles into multiple files and import them into a main stylesheet without performance issues.
• Operators: Perform mathematical operations within stylesheets for dynamic values.
• Extend/Inheritance: Share styles between different selectors to avoid repetition.
• Functions and Loops: Automate repetitive tasks within stylesheets for efficiency.

SCSS vs. CSS

SCSS is fully compatible with standard CSS, meaning any valid CSS code can be used within an SCSS file. However, SCSS provides additional functionality that simplifies and enhances the styling process.

Table: SCSS vs. CSS

Feature	CSS	SCSS
Variables	❌	✅
Nesting	❌	✅
Mixins	❌	✅
Partials	❌	✅
Operators	❌	✅
Extend	❌	✅

SCSS Examples

• Using Variables:

“`scss $primary-color: #3498db; $font-stack: 'Arial', sans-serif; body { color: $primary-color; font-family: $font-stack; } “`

• Nesting:

“`scss .navbar { background: #333; ul { list-style: none; li { display: inline-block; a { color: white; text-decoration: none; } } } } “`

• Mixins:

“`scss @mixin flex-center { display: flex; justify-content: center; align-items: center; } .container { @include flex-center; height: 100vh; } “`

• Partials and Imports:

“`scss // _variables.scss $bg-color: #f4f4f4; // main.scss @import 'variables'; body { background: $bg-color; } “`

How to Use SCSS

• Install Sass: Use the command `npm install -g sass` to install Sass globally.
• Compile SCSS to CSS: Use the command `sass input.scss output.css` to compile an SCSS file to CSS.
• Use SCSS in Your Project: Link the compiled CSS file in your HTML and use SCSS for modular, maintainable styles.

SCSS is an advanced and efficient way to write CSS, making stylesheets more scalable and maintainable. Its additional features help developers write cleaner and more reusable code, improving both productivity and project organization.