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

Sass is a stylesheet compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax.

Make use of Variables

Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself.

@charset "utf-8";

// Our variables
$base-font-size:   16px;
$base-font-weight: 400;
$small-font-size:  $base-font-size * 0.875;
$big-font-size:  $base-font-size * 1.875;
$base-line-height: 1.5;

$spacing-unit:     30px;

or, fonts

// Load Google webfonts as protocol agnostic
@import url('//fonts.googleapis.com/css?family=Carme');
$base-font-family: 'Carme', sans-serif;

or colors

$text-color:                 darkgrey;
$background-color:           rgb(0, 0, 0);
$brand-color-1:                #00909f;
$secondary-brand-color:      #FF3300;

$grey-color:       #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark:  darken($grey-color, 25%);

Mixins

@mixin opacity($value) {
  $IEValue: $value*100;
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
  filter: alpha(opacity=$IEValue);
}

And now use it

.some-div-supposed-to-be-transparent {
 @include opacity(0.5)
}

Practical note:

The opacity mixin is not a good option since it make children inherit transparency: @include opacity(0.5), therefore we use rgba;

  background-color: rgba(0, 0, 0, .5);