SASS Tutorial

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

SASS Cheat Sheet : https://devhints.io/sass

Introduction to SASS

• What is SASS?
  • A CSS preprocessor that extends CSS syntax with features like variables, nested rules, mixins, and functions.
  • Improves code organization, maintainability, and reusability.
• Why use SASS?
  • Variables: Store and reuse values throughout your stylesheet.
  • Nested rules: Create more readable and organized CSS structures.
  • Mixins: Define reusable code blocks for common styles.
  • Functions: Perform calculations and create custom functions.
  • Inheritance: Create base styles and extend them for specific elements.

Setting Up SASS

• Choose a SASS compiler:
  • Ruby Sass: The original SASS compiler, typically installed with Ruby.
  • Dart Sass: A faster and more modern compiler written in Dart.
• Install the compiler:
  • Follow the installation instructions for your chosen compiler.
• Create a SASS file:
  • Create a .scss file (e.g., styles.scss) in your project directory.

Set up SASS in VS Code using the Live Sass Compiler extension:

Installation:

1. Open VS Code: Launch VS Code on your system.
2. Open Extensions: Click on the Extensions icon in the left sidebar (or use the shortcut Ctrl+Shift+X).
3. Search for Live Sass Compiler: Type "Live Sass Compiler" in the search bar and press Enter.
4. Install Extension: Click the "Install" button for the Live Sass Compiler extension.

Configuration:

1. Open Settings: Go to "File" > "Preferences" > "Settings" (or use the shortcut Ctrl+,).
2. Search for Live Sass Compiler: Type "Live Sass Compiler" in the search bar.
3. Configure Settings (Optional): If you want to customize the extension's behavior, you can adjust various settings:
   • Output File: Specify the desired output filename for your compiled CSS file (e.g., "style.css").
   • Output Style: Choose the CSS output style (e.g., "compressed", "nested", "expanded").
   • Sourcemap: Enable sourcemaps for easier debugging.
   • Autoprefix: Automatically add vendor prefixes for browser compatibility.
   • Watch: Enable automatic recompilation when SASS files change.

Creating a SASS File:

1. Create a New File: Choose "File" > "New File" (or use the shortcut Ctrl+N).
2. Save as SASS: Save the file with a .scss extension (e.g., "styles.scss").

Writing SASS Code:

1. Start Writing: Write your SASS code in the .scss file. You can use SASS features like variables, nested rules, mixins, and functions.

Compiling SASS to CSS:

1. Save the File: Save your changes to the .scss file.
2. Automatic Compilation: If the "Watch" setting is enabled, the Live Sass Compiler will automatically compile your SASS code into a CSS file.
3. Manual Compilation: If "Watch" is disabled, you can manually trigger compilation by:
   • Right-clicking on the .scss file and selecting "Compile Sass".
   • Using the "Compile" command from the command palette (Ctrl+Shift+P).

Using the Compiled CSS:

1. Link the CSS File: In your HTML file, link the compiled CSS file using a <link> tag:

   <link rel="stylesheet" href="style.css">

Additional Tips:

• Explore the Live Sass Compiler documentation for more advanced features and customizations.
• Consider using a linter like Sass Lint to check your SASS code for errors and style guidelines.
• Take advantage of VS Code's built-in features like code completion, snippets, and debugging to enhance your SASS development experience.

By following these steps, you should be able to successfully set up SASS in VS Code using the Live Sass Compiler extension and start writing efficient and organized stylesheets.

Basic SASS Syntax

• Variables:
  • Use $ to define variables.
  • Example:

    $primary-color: #007bff;
    $font-size: 16px;

• Nested rules:
  • Nest rules within other rules to create hierarchical structures.
  • Example:

    .container {
        .row {
            display: flex;
        }
    }

• Mixins:
  • Define reusable code blocks using @mixin.
  • Use @include to include a mixin.
  • Example:

    @mixin clearfix {
        &:before,
        &:after {
            content: "";
            display: table;
        }
        &:after {
            clear: both;
        }
    }
    
    .container {
        @include clearfix;
    }

In SASS (Syntactically Awesome Stylesheets), @forward, @use, and partials are features used to organize and modularize stylesheets.

1. Partials in SASS

A partial is a small SASS file that contains CSS snippets (variables, mixins, functions, etc.) and is meant to be included in other SASS files. Partials are named with a leading underscore (_), indicating they should not be compiled into a standalone CSS file. Instead, they are imported into other SASS files.

For example:

// _colors.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// styles.scss
@use 'colors';

body {
  background-color: colors.$primary-color;
}

2. @use in SASS

The @use rule loads another SASS file and makes its variables, mixins, and functions available in the current file. However, when using @use, the loaded file's contents are namespaced by default, meaning you have to reference the file name (or alias) when using the variables, mixins, etc.

For example:

// _variables.scss
$font-size: 16px;

// main.scss
@use 'variables';

body {
  font-size: variables.$font-size;
}

You can also alias a module loaded via @use:

@use 'variables' as vars;

body {
  font-size: vars.$font-size;
}

3. @forward in SASS

The @forward rule is used to share a stylesheet's variables, mixins, and functions with other stylesheets. It differs from @use in that it is typically used inside a module that wants to re-export its contents. This allows for better modularity and control over which parts of a file get forwarded to other files.

For example:

// _mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// _index.scss
@forward 'mixins';

// main.scss
@use 'index';

.container {
  @include index.flex-center;
}

The @forward rule can be used along with @use to re-export and bundle different partials together.

---

Practical Example Combining Everything:

// _variables.scss
$primary-color: #ff6347;

// _mixins.scss
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// _index.scss
@forward 'variables';
@forward 'mixins';

// main.scss
@use 'index';

body {
  background-color: index.$primary-color;
}

.container {
  @include index.center;
}

In this setup:

• @forward allows index.scss to bundle and re-export both _variables.scss and _mixins.scss.
• @use in main.scss imports the index namespace, enabling access to variables and mixins without importing each partial individually.

@mixin and @include in SASS:

@mixin:

• Purpose: Defines a reusable block of CSS styles that can be included multiple times in different places within your SASS code.
• Structure:
  • Begins with the @mixin directive followed by the mixin's name.
  • Contains the CSS rules you want to define.
  • May accept parameters to make the mixin more flexible.
• Example:

  @mixin button($background-color, $color) {
    background-color: $background-color;
    color: $color;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }

@include:

• Purpose: Includes a previously defined mixin within a CSS rule.
• Usage:
  • Begins with the @include directive followed by the mixin's name.
  • May pass arguments to the mixin if it accepts parameters.
• Example:

  .primary-button {
    @include button(#007bff, white);
  }
  
  .secondary-button {
    @include button(#6c757d, black);
  }

Key Differences:

• @mixin: Defines a reusable block of CSS styles.
• @include: Includes a previously defined mixin within a CSS rule.

Key Benefits:

• Code Reusability: Avoids repeating the same CSS rules multiple times.
• Organization: Enhances code organization and maintainability.
• Customization: Allows for easy customization of styles through parameters.
• Efficiency: Reduces the amount of code you need to write.

Best Practices:

• Use meaningful names for your mixins to improve readability.
• Consider using parameters to make your mixins more flexible.
• Avoid nesting mixins too deeply to prevent complexity.
• Use mixins to encapsulate complex style patterns or components.

Example Usage:

// Mixin to define a button style
@mixin button($background-color, $color) {
  background-color: $background-color;
  color: $color;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

// Mixin to define a border style
@mixin border($width, $style, $color) {
  border: $width $style $color;
}

// Using the mixins to style elements
.primary-button {
  @include button(#007bff, white);
  @include border(2px, solid, #ccc);
}

.secondary-button {
  @include button(#6c757d, black);
  @include border(1px, dashed, #999);
}

By effectively using @mixin and @include, you can write cleaner, more maintainable, and more efficient SASS code.

@extend and inheritance in SASS:

Extend:

• Purpose: Allows you to create new selectors that inherit the styles of existing selectors without explicitly copying the CSS rules.
• Syntax:
  • %selector-name {}: Defines a placeholder selector.
  • %selector-name: extend %other-selector;: Extends the styles of %other-selector into %selector-name.
• Example:

  %button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
  
  .primary-button {
    @extend %button;
    background-color: #007bff;
    color: white;
  }
  
  .secondary-button {
    @extend %button;
    background-color: #6c757d;
    color: black;
  }

Inheritance:

• Purpose: In SASS, inheritance is achieved through the @extend directive. It allows you to create new selectors that inherit the styles of existing selectors.
• How it works:
  • The @extend directive is used to specify the selector that you want to inherit from.
  • The styles of the inherited selector are merged with the styles of the new selector.
  • If there are conflicting styles, the styles of the new selector take precedence.

Key Differences:

• Extend: Specifically designed for creating new selectors that inherit styles from existing selectors.
• Inheritance: A broader concept that encompasses the idea of one selector inheriting styles from another. In SASS, inheritance is implemented using the @extend directive.

Best Practices:

• Use @extend judiciously to avoid creating overly complex and difficult-to-maintain stylesheets.
• Consider using mixins for more complex style patterns that require customization.
• Use meaningful names for your placeholder selectors to improve readability.
• Avoid extending selectors that are deeply nested or have many child selectors.

Example Usage:

// Base selector
%base-button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

// Extended selectors
.primary-button {
  @extend %base-button;
  background-color: #007bff;
  color: white;
}

.secondary-button {
  @extend %base-button;
  background-color: #6c757d;
  color: black;
}

// Nested selector
.button-group {
  .button {
    @extend %base-button;
    margin-right: 10px;
  }
}

By effectively using @extend and understanding the concept of inheritance, you can create well-structured, maintainable, and reusable SASS stylesheets.

@if, @else if, and @else:

@if:

• Purpose: Executes a block of CSS code if a specified condition is true.
• Syntax:
  • @if <condition> { <CSS rules> }
• Example:

  $is-dark-mode: true;
  
  body {
    @if $is-dark-mode {
      background-color: black;
      color: white;
    } @else {
      background-color: white;
      color: black;
    }
  }

@else if:

• Purpose: Provides an additional condition to check if the previous @if condition is false.
• Syntax:
  • @else if <condition> { <CSS rules> }
• Example:

  $theme: "light";
  
  body {
    @if $theme == "dark" {
      background-color: black;
      color: white;
    } @else if $theme == "light" {
      background-color: white;
      color: black;
    } @else {
      background-color: #f0f0f0;
      color: #333;
    }
  }

@else:

• Purpose: Executes a block of CSS code if none of the previous @if or @else if conditions are true.
• Syntax:
  • @else { <CSS rules> }
• Example:

  $browser: "Chrome";
  
  body {
    @if $browser == "Firefox" {
      /* Firefox-specific styles */
    } @else if $browser == "Safari" {
      /* Safari-specific styles */
    } @else {
      /* Default styles */
    }
  }

Key Points:

• Conditions in SASS are evaluated using Boolean logic.
• You can use comparison operators (==, !=, <, >, <=, >=) and logical operators (and, or, not) to create complex conditions.
• Nested @if statements are supported.
• The @else block is optional but can be useful for providing a default case.

Best Practices:

• Use clear and concise conditions to improve readability.
• Consider using variables to store values that may change.
• Test your code thoroughly to ensure it works as expected under different conditions.

By effectively using @if, @else if, and @else, you can create dynamic and responsive SASS stylesheets that adapt to different scenarios and user preferences.

Explanation of loops in SASS @for, @while

@for Loop:

• Purpose: Executes a block of code a specified number of times.
• Syntax:
  • @for $variable from <start> through <end> { <CSS rules> }
  • @for $variable from <start> to <end> { <CSS rules> }
• Difference between through and to:
  • through includes both the start and end values.
  • to excludes the end value.
• Example:

  @for $i from 1 through 5 {
    .item-#{$i} {
      width: 20px * $i;
      height: 20px * $i;
    }
  }

  Example

  @for $i from 1 to 5 {
      .item-#{$i} {
        width: 20px * $i;
        height: 20px * $i;
      }
    }

@while Loop:

Purpose: Executes a block of code as long as a specified condition is true. Syntax:

  @while <condition> {
      <CSS rules>
    }

Example:

$i: 1;
@while $i <= 5 {
  .item-#{$i} {
    width: 20px * $i;
    height: 20px * $i;
  }
  $i: $i + 1;
}

Key Points:

• Both loops allow you to generate dynamic CSS based on variables.
• @for loops are typically used when you know the exact number of iterations in advance.
• @while loops are useful when you need to repeat a block of code until a certain condition is met.
• You can use variables within the loop body to create dynamic CSS rules.
• Be cautious of infinite loops, especially when using @while loops. Ensure that the condition eventually becomes false.

Best Practices:

• Use clear and concise loop conditions to improve readability.
• Consider using nested loops for more complex scenarios.
• Avoid infinite loops by ensuring that the loop condition eventually becomes false.
• Use meaningful variable names to make your code easier to understand.

Example Usage:

// Using @for loop to generate a grid
@for $i from 1 through 10 {
  .column-#{$i} {
    width: 10%;
    margin-right: 10px;
  }
}

// Using @while loop to create a countdown timer
$seconds: 10;
@while $seconds > 0 {
  .countdown-#{$seconds} {
    // Countdown timer styles
  }
  $seconds: $seconds - 1;
}

By effectively using @for and @while loops, you can create dynamic and flexible SASS stylesheets that adapt to different scenarios and requirements.

@each to map over items in SASS:

@each directive:

• Purpose: Iterates over a list or map, executing a block of code for each item.
• Syntax:

  @each $item in <list> {
    <CSS rules>
  }
  
  @each $key, $value in <map> {
    <CSS rules>
  }

• Example:

  $colors: (
    primary: #007bff,
    secondary: #6c757d,
    success: #28a745
  );
  
  @each $color-name, $color-value in $colors {
    .#{$color-name}-button {
      background-color: $color-value;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
  }

Key points:

• The $item variable in the @each loop holds the current item being iterated over.
• For maps, the $key variable holds the key of the current item, and the $value variable holds the value.
• You can use interpolation (#{$variable}) to insert the value of a variable into CSS rules.

Best practices:

• Use meaningful variable names to improve readability.
• Indent your code consistently for better organization.
• Consider using nested @each loops to iterate over multiple levels of data.

Example usage:

$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745
);

$sizes: (
  small: 12px,
  medium: 14px,
  large: 16px
);

@each $color-name, $color-value in $colors {
  @each $size-name, $size-value in $sizes {
    .#{$color-name}-button-#{$size-name} {
      background-color: $color-value;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      font-size: $size-value;
    }
  }
}

This example demonstrates how to use nested @each loops to create a grid of buttons with different colors and sizes.

By effectively using the @each directive, you can generate dynamic and reusable CSS styles based on lists and maps of data.

Compiling SASS to CSS

• Use your SASS compiler:
  • Run the compiler to convert your SASS file into a CSS file.
  • The compiled CSS file can be included in your HTML document.

Additional SASS Features

• Operators: Perform calculations and comparisons.
• Placeholders: Create reusable placeholders for styles.
• Extend: Extend existing selectors with additional styles.
• Control directives: Use @if, @else, and @for for conditional logic and loops.
• Imports: Import other SASS files into your main file.

Best Practices

• Use meaningful variable names: Make your code more readable and understandable.
• Keep mixins and functions reusable: Avoid including specific selectors or values within them.
• Follow CSS naming conventions: Use consistent naming practices for classes and IDs.
• Consider using a linter: A linter can help you identify potential errors and improve code quality.

Conclusion

SASS provides a powerful and flexible way to write CSS. By understanding the core features and best practices, you can improve your CSS development workflow and create more maintainable and scalable stylesheets.