SASS: basic concepts

Sass is a language extension of CSS that adds features that aren't available in basic CSS, and makes it easier to maintain the larger, more complex stylesheets in projects.

List of concepts:

1. sass variables
2. Nested CSS styles
3. scss mixins
4. @if and @else condition
5. @for Loop
6. @each to map over list items
7. @extend existing css rule
8. @import partial stylesheets

1. sass variables

With sass variable, property value can be stored and be reused at simmilar places. Any update to the variable will be reflected in referred places.

The variable starts with $ symbol.

$text-size: 15px;

.description {
  font-size: $text-size;
}

2. Nested CSS styles

Sass allows nesting of CSS rules organizing a style sheet efficiently.

.post {
  .title {
    font-size: 40px;
    font-weight: strong;
  }

  .para {
    font-size: 16px;
    font-family: 'Roboto Mono';
  }
}

3. scss mixins

In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet.

@mixin border($width, $stroke, $color) {
  border-width: $width;
  border-style: $stroke;
  border-color: $color;
}

@mixin section {
  border-radius: 5px;
  padding: 1em;
}

.section {
  @include border(1px, solid, red);
  @include section;
}

output CSS:

.section {
  border-width: 1px;
  border-style: solid;
  border-color: red;
  border-radius: 5px;
  padding: 1em;
}

4. @if and @else condition

The @if directive in Sass is useful to add conditionals just like in JavaScript.

@mixin banner-color($type) {
  @if $type == success {
    background-color: green;
    color: white;
  } @else if $type == danger {
    background-color: red;
    color: white;
  } @else {
    background-color: #ccc;
    color: black;
  }
}

.banner {
  padding: 1em;
  border: 1px solid transparent;
  border-radius: 5px;
  @include banner-color(default);

  &.success {
    @include banner-color(success);
  }

  &.danger {
    @include banner-color(danger);
  }
}

output CSS:

.banner {
  padding: 1em;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: #ccc;
  color: black;
}
.banner.success {
  background-color: green;
  color: white;
}
.banner.danger {
  background-color: red;
  color: white;
}

5. @for Loop

The @for directive adds css styles in a loop

@for is used in two ways:

• start through end : excludes the end number as part of the count

• start to end : includes the end number as part of the count.

@for $i from 1 through 4 {
  .through-#{$i} {
    font-size: 15px;
  }
}

@for $i from 1 to 4 {
  .to-#{$i} {
    font-size: 15px;
  }
}

output CSS:

.through-1 {
  font-size: 15px;
}

.through-2 {
  font-size: 15px;
}

.through-3 {
  font-size: 15px;
}

.through-4 {
  font-size: 15px;
}

.to-1 {
  font-size: 15px;
}

.to-2 {
  font-size: 15px;
}

.to-3 {
  font-size: 15px;
}

6. @each to map over list items

@each directive helps loops over each item in a list or map and generate css style.

list example :

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

output CSS:

.red-text {
  color: red;
}

.blue-text {
  color: blue;
}

.green-text {
  color: green;
}

.black-text {
  color: black;
}

map example :

$colorMap: (
  success: green,
  danger: red,
  info: grey
);

@each $key, $color in $colorMap {
  .#{$color}-text {
    color: $color;
  }
}

output CSS:

.green-text {
  color: green;
}

.red-text {
  color: red;
}

.grey-text {
  color: grey;
}

7. extend existing css rule

@extend instead of coping same css rules adds the class name to the extending class.

.info {
  padding: 1em;
  border: 1px solid transparent;
  border-radius: 5px;
}

.info-banner {
  @extend .info;
  font-weight: strong;
  font-size: 20px;
}

output CSS:

.info,
.info-banner {
  padding: 1em;
  border: 1px solid transparent;
  border-radius: 5px;
}

.info-banner {
  font-weight: strong;
  font-size: 20px;
}

8. @import partial stylesheets

Partials in Sass are separate files that hold CSS style that can be imported and used in other files.

Names for partials start with the underscore (_), so SASS does not to convert it into a CSS file. The partials can be imported to main file with @import keyword.

// _variables.scss exists in same folder
@import 'variables';

// styles for main file.