SASS (Syntactically Awesome StyleSheets)- Basics (Part 1)

What we will learn:-

• Store Data in variables
• Nesting CSS with Sass
• Reusable CSS using Mixins
• if, else
• for loop
• each
• while
• Splitting styles into different files
• Extend properties of other class

We will keep the articles short so that we can make this a short series of articles. For this article, we will be going through the first 4 parts of the above learning objectives.

Storing Data in variables:-

In CSS if we want to declare some style for a particular class we had to write all the particular styles for it though we might have the necessity to have some of the style properties the same for the next class. This gives rise to problems when the style needs to be changed in the future.

CSS doesn't support variables for the above-mentioned problems. In Sass, we can mention a variable that can be used and assigned like any normal programming language.

So how we do so? Let's dive into some code -

$fonts: Arial, sans-serif;
$headings-color: green;

//To use variables:
h1 {
  font-family: $fonts;
  color: $headings-color;
}

We can see how the variable is being used in place rather than using the actual property value.

Nesting CSS with Sass

For any normal CSS, we don't have the unique way to nest CSS into other CSS, rather we follow writing each class and then defining the properties for each of them. For example:-

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

For the above code, we have all the classes like ul and li nested in but the above code is the normal CSS code and doesn't follow the nesting architecture. If we were to write this code in Sass form we will have:-

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

Reusable CSS using Mixins:-

This is similar to what we can say as defining the function and using it again and again with different parameters. This gives a lot of flexibility and control over the use of different styles and can reuse again and again. Let's see how we can do this.

<style>
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

// To reuse it again
div {
  @include border-radius(15px);
}
</style>

Using if-else

This works exactly similar to what we normally see in the if-else statements. Let's see how we can implement it in Sass

@mixin text($v) {
  @if $v == danger {
    color: blue;
  }
  @else if $v == alert {
    color: red;
  }
  @else if $v == success {
    color: yellow;
  }
  @else {
    color: black;
  }
}

In here we use mixins and we can just do normal if-else to make conditions on the styling we want to achieve.

Stay Tuned for the next article we will go through the next 4 sections that we haven't yet covered 😊😊