main.scss

@import 'colors';
@import 'mixins';

section {
    padding: 1em;
}

.color-1 {
    color: $color1;
}

.color-2 {
    color: $color2;
}

.color-3 {
    color: $color3;
}

.color-4 {
    color: $color4;
}

.class-1 {
    @include base-button();
}

.class-2 {
    @include base-button( $color2);
}

.class-3 {
    @include base-button( $radius: 10px);
}

.class-4 {
    @include base-button();
    padding: 0 1em;
}

.alert {
    border: 1px solid;
    padding: 1em;
}

.other-style-1 {
    @extend .alert;
    background-color: rgba( $color1, 0.2);
    color: $color1;
}

.other-style-2 {
    @extend .alert;
    background-color: rgba( $color2, 0.2);
    color: $color2;
}

_mixins.scss

@mixin global-shadow() {
box-shadow: 1px 1px 3px rgba( black, 0.3);
}

@mixin base-button( $color: $color3, $text-color: white, $radius: 3px) {
background-color: $color;
background-image: linear-gradient( lighten( $color, 20%), darken( $color, 10%));
border: 1px solid darken( $color, 10%);
border-radius: $radius;
color: $text-color;
@include global-shadow();
line-height: 99em;
padding: 0 2em;
}

_colors.scss

$color1: red;
$color2: blue;
$color3: #FF69B4;
$color4: lighten( black, 5%);