SASS/SCSS Compiler | Programmer Online Tools

Sass Scss Compiler

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

Variables

Unlike LESS in SASS, you can assign a value to a special name that begins with $.

Input

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

Output

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

each

Bind the evaluation of a ruleset to each member of a list.

Input

$sizes: 40px, 60px, 80px, 100px, 120px;

@each $size in $sizes {
    .panel-#{$size} {
        height: $size;
    }
}

Output

.panel-40px {
  height: 40px;
}

.panel-60px {
  height: 60px;
}

.panel-80px {
  height: 80px;
}

.panel-100px {
  height: 100px;
}

.panel-120px {
  height: 120px;
}

Using booleans true and false

You can use booleans to choose whether or not to do various things in Sass, Such as dynamic to render properties.

Input

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av { @include avatar(100px, $circle: false); }
.circle-av { @include avatar(100px, $circle: true); }

Output

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

lighten

Increase the lightness of a color in the HSL color space by an absolute amount.

Input

.container {
    background:lighten(#00ff00, 30%)
}

Output

.container {
  background: #99ff99;
}

#00ff00

#99ff99

darken

Decrease the lightness of a color in the HSL color space by an absolute amount.

Input

.container {
    background:darken(#cb7832, 30%)
}

Output

.container {
  background: #502f14;
}

#cb7832

#502f14

For more info you can visit sass-lang.com.