Introduction to SCSS

What is SCSS and how it differs from CSS

SCSS (Sassy CSS) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It's the newer syntax for Sass, which uses a syntax similar to CSS with braces and semicolons.

Key differences from CSS:

Variables: SCSS allows you to define variables to store colors, font stacks, or any CSS value you want to reuse.
Nesting: SCSS lets you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
Mixins: SCSS enables you to create reusable pieces of CSS code.
Functions: SCSS provides built-in functions and allows you to define your own functions to manipulate values.
Control Directives: SCSS includes conditionals and loops for more programmatic control.

Benefits over plain CSS

Maintainability: Variables and mixins make it easier to update your styles.
Organization: Nesting and partials help organize your code better.
Efficiency: Write less code with features like mixins and extends.
Calculations: Perform mathematical operations directly in your stylesheets.
Logic: Use conditionals and loops to create more dynamic stylesheets.
Modularity: Split your code into multiple files and import them where needed.

Setting up SCSS in a project

Method 1: Using Node.js and npm


# Install Sass globally
npm install -g sass

# Compile SCSS to CSS
sass input.scss output.css

# Watch for changes
sass --watch input.scss output.css

Method 2: Using build tools

SCSS can be integrated with various build tools:

Webpack: Use sass-loader with webpack
Gulp: Use gulp-sass plugin
Gradle: Use plugins like io.freefair.sass

Method 3: Using VS Code extensions

Install extensions like "Live Sass Compiler" to compile SCSS files directly in your editor.

Pro Tip: For this project, we're using the io.freefair.sass Gradle plugin to compile SCSS files to CSS during the build process.

Example: Basic SCSS vs CSS

SCSS


$primary-color: #3498db;
$secondary-color: #2ecc71;
$border-radius: 4px;

.container {
  max-width: 1200px;
  margin: 0 auto;
  
  .header {
    background-color: $primary-color;
    padding: 20px;
    border-radius: $border-radius;
    
    h1 {
      color: white;
      margin: 0;
    }
    
    &:hover {
      background-color: darken($primary-color, 10%);
    }
  }
  
  .content {
    padding: 20px;
    
    button {
      background-color: $secondary-color;
      border: none;
      padding: 10px 15px;
      border-radius: $border-radius;
      color: white;
      
      &:hover {
        background-color: darken($secondary-color, 10%);
      }
    }
  }
}

Compiled CSS


.container {
  max-width: 1200px;
  margin: 0 auto;
}
.container .header {
  background-color: #3498db;
  padding: 20px;
  border-radius: 4px;
}
.container .header h1 {
  color: white;
  margin: 0;
}
.container .header:hover {
  background-color: #2980b9;
}
.container .content {
  padding: 20px;
}
.container .content button {
  background-color: #2ecc71;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  color: white;
}
.container .content button:hover {
  background-color: #25a25a;
}