SASS For Beginners ⚡️

SASS For Beginners ⚡️

An AMAZING CSS PREPROCESSOR

SASS (Syntactically Awesome Style Sheets) is a tool known as a CSS preprocessor. CSS preprocessors are scripting languages that extend the default capabilities of CSS.

It is a great tool to utilize when you wish to code more maintainable CSS. Especially when working with larger codebases.

Definition ✅

“ A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s unique syntax. There are many CSS preprocessors to choose from, however, most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain ”MDN

The advantage it keeps your CSS Dry, which stands for “Don’t Repeat Yourself.”

Why use a preprocessor? 💡

  • Cleaner code

  • Ease of maintenance

  • CSS Preprocessor Helps You Avoid Repetitions

  • Ability to implement logic and calculation in our stylesheets.

  • Save hours of development time!

Features 📌

We will talk about all the features listed below:

Variables

Nesting

Mixins

Functions

Partials & Imports

Inheritance (Extend functionality)

Control directives


Variables

Vanilla CSS does support the use of variables, but Sass dramatically simplifies them. Variables are a way to store information that you want to reuse throughout your stylesheet.

They allow us to store values for colors, fonts, or any CSS value that you want to reuse! We use the $ symbol when we wish to make something a variable.

In our SCSS, let’s define a color variable:

$primaryColor: #000080; // Navy Blue

body {
  background-color: $primaryColor;
}

When we then run our compile, it’ll output the following CSS:

body {
  color: #000080;
}

If you wish to change a color used throughout your stylesheet, it’s much simpler to alter if the color is defined in one location as a single variable.

Nesting

Nesting is a shortcut to creating CSS rules. So instead of writing so many lines of CSS just to be specific on the style we want to apply to an element, we simply nest it.

In SASS, nesting allows you to apply styles to child elements within a parent element. This can make your CSS more organized and easier to read. For example, instead of writing separate selectors for each child element, you can nest the child selectors inside the parent selector, like so:

.parent {
  color: red;
  .child {
    background-color: grey;
  }
}

This will apply the color "red" to the parent element and the background color "grey" to any child element within the parent element. The CSS generated will be:

.parent {
  color: red;
}
.parent .child {
  background-color: grey;
}

Nesting can also be used with @media queries and other control directives such as @if and @for to further customize your styles based on different conditions.

Mixins

In SASS, mixins allow you to reuse a group of CSS declarations across multiple selectors. A mixin is defined using the @mixin directive, followed by the name of the mixin and the declarations you want to include. For example:

@mixin border-radius {
  border-radius: 5px;
}

To use the mixin, you can include it using the @include directive within a selector:

.box {
  @include border-radius;
}

This will add the border-radius: 5px declaration to the .box selector, just as if you had written it directly in the CSS.

You can also pass values to mixins, which can be used to generate dynamic styles. These values are called arguments and are passed within parenthesis after the mixin name.

For example:

@mixin border-radius($radius) {
  border-radius: $radius;
}

This mixin can be used by passing a value of radius to it.

.box {
  @include border-radius(10px);
}

Mixins can be a powerful tool in SASS, allowing you to write more modular and maintainable stylesheets.

Functions

In SASS, functions are similar to mixins in that they allow you to reuse a group of code across multiple selectors. However, unlike mixins, functions return a value that can be used within other expressions. A function is defined using the @function directive, followed by the name of the function, any arguments that should be passed in, and the code to be executed. For example:

@function double($value) {
  @return $value * 2;
}

This function takes a value and returns it multiplied by 2. To use this function, you can call it with the value you want to pass in:

.box {
  width: double(100px);
}

This will set the width of the .box element to 200px. Functions can also be used to perform calculations and return a value, such as color calculation.

@function darken($color, $amount) {
  @return darken($color, $amount);
}

This function will take the color and amount passed in and returns the color with an amount of darkness added to it.

body {
  background-color: darken(#ff0000, 10%);
}

Functions can be a powerful tool in SASS, allowing you to write more dynamic and maintainable stylesheets.

It's also important to note that SASS uses the same syntax for both Mixins and Functions, the only difference is the use of @return statement in functions, which is not present in mixins.

Partials & Imports

In SASS, partials and imports are used to organize and reuse your stylesheets.

A partial is a SASS file that contains a portion of your styles and is intended to be included in other SASS files using the @import directive. Partials are usually used to organize large projects into smaller, more manageable chunks. They are named with a leading underscore, for example _partial.scss, to indicate that they are not meant to be compiled into CSS on their own.

For example, you could have separate partial files for your variables, mixins, and base styles, and then import them all into your main stylesheet.

// _variables.scss

$primary-color: red;

// _mixins.scss

@mixin border-radius {
  border-radius: 5px;
}

// main.scss

@import "variables";
@import "mixins";

body {
  background-color: $primary-color;
  @include border-radius;
}

The @import directive tells SASS to include the contents of the specified file into the current file. This way, variables and mixins can be shared across multiple files and the codebase can be organized in a more modular way. The @import directive can take a filename or a file path.

When SASS compiles the main.scss file, it will include the contents of _variables.scss and _mixins.scss at the top of the file, resulting in a single CSS output file.

It's also important to note that SASS also support importing CSS files. It's important to note that the order of imports matters, SASS will process them in the order they are imported, so if you have a variable that is defined in one file and you are using it in another, make sure that the file that defines it is imported before the file that uses it.

Inheritance (Extend functionality)

In SASS, the @extend directive allows you to inherit the styles of one selector and apply them to another selector. This can be useful for avoiding duplication and keeping your styles DRY (Don't Repeat Yourself).

For example, if you have a class that you want to apply to multiple elements, you can use @extend to share the styles instead of writing them multiple times.

.common-style {
  color: blue;
}

.box {
  @extend .common-style;
  background-color: yellow;
}

.button {
  @extend .common-style;
  border: 1px solid black;
}

This will generate the following CSS:

.common-style, .box, .button {
  color: blue;
}
.box {
  background-color: yellow;
}
.button {
  border: 1px solid black;
}

As you can see, the styles of the .common-style class are applied to both .box and .button classes, which is the same as if you had written the styles directly in each class.

It's also important to note that @extend can also be used with placeholders, which are classes or placeholders defined with % instead of . . They are like a mixin without any styles of their own, only used to be extended.

For example:

%common-style {
  color: blue;
}

.box {
  @extend %common-style;
  background-color: yellow;
}

.button {
  @extend %common-style;
  border: 1px solid black;
}

This will generate the same CSS as the previous example, but it will not generate any CSS for the %common-style.

It's important to note that if you're using @extend a lot, it can lead to increased CSS file size and a lot of selectors in your CSS file. So, it's important to use it judiciously.

Control directives

In SASS, control directives are used to apply styles conditionally or iteratively, based on the values of variables or other expressions. Some examples of control directives include:

  • @if: Allows you to apply styles conditionally based on the value of a variable or expression. For example:

      $is-large: true;
    
      .box {
        width: 100px;
        @if $is-large {
          width: 200px;
        }
      }
    
  • @for: Allows you to iterate over a range of values and apply styles to each iteration. For example:

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

This will generate 5 classes .item-1, .item-2, .item-3, .item-4, .item-5 with widths 100px, 200px, 300px, 400px, 500px respectively.

  • @each: Allows you to iterate over a list of values and apply styles to each iteration. For example:

      $colors: red, blue, green;
    
      @each $color in $colors {
        .#{$color} {
          background-color: $color;
        }
      }
    

    This will generate 3 classes .red, .blue, .green with background-colors red, blue, green respectively.

    • @while: Allows you to apply styles repeatedly while a certain condition is true. For example:

        $i: 6;
        @while $i > 0 {
          .item-#{$i} {
            width: 100px * $i;
          }
          $i: $i - 1;
        }
      

      This will generate 6 classes .item-6, .item-5, .item-4, .item-3, .item-2, .item-1 with widths 600px, 500px, 400px, 300px, 200px, 100px respectively.

      Control directives can be a powerful tool in SASS, allowing you to write more dynamic and maintainable stylesheets. However, it's important to use them judiciously, as overusing them can lead to complex and hard-to-maintain code.

Conclusion

SASS is a powerful preprocessor that can help you write more organized and maintainable stylesheets. It offers several features such as variables, nesting, mixins, functions, partials, imports and control directives that can help you write more modular and reusable code.

By using SASS, you can write more efficient and manageable CSS. Nesting allows you to apply styles to child elements within a parent element, making your CSS more organized and easier to read. Mixins allow you to reuse a group of CSS declarations across multiple selectors, making your code more maintainable. Functions are similar to mixins but they return a value that can be used within other expressions. Partials and imports allow you to organize your stylesheets into smaller, more manageable chunks, and control directives allow you to apply styles conditionally or iteratively based on the values of variables or other expressions.

SASS can be a powerful tool for any developer, and it's easy to learn and use, even for beginners. It's important to use SASS features judiciously and to keep in mind that with great power comes great responsibility, so use it in a way that makes your codebase more maintainable and efficient.

Did you find this article valuable?

Support Anirudh Panda by becoming a sponsor. Any amount is appreciated!