Web Development

Variables

$white: #FFF;

body {
  color: $white;
}

Mixins

Example 1

@mixin font-size($times) {
  font-size: $times * 1.2px;
}

.highlight {
  @include font-size(3);
}

Example 2

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

.box {
  @include border-radius(10px);
}

Extends

%button {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
}

.white-button {
   @extend %button;
  background-color: #FFF;
}

.green-button {
   @extend %button;
  background-color: #00FF00;
}