SASS

Variables , Maths

by Ben Clayton

HTML

<div class="content_navigation">
Menu
  <div class="item">
    Home
  </div>
  <div class="item">
    History
  </div>
</div>

<br/>Variable names start with a dollar and are set like css properties.
Need to do some math with height and width and text size? Sass supports variables, math operations, and many useful functions.

SCSS

$blue: #3bbfce;
$margin: 36px;

.content_navigation {
  color: darken($blue, 20%);
}

.item {
  padding: $margin / 2;
  margin: $margin / 2;
  background-color:lighten($blue,40%);
  border-color: $blue;
  border-width: 1px;
  border-style: solid;
}