• Use semantic variable names

• Adopt useful conventions

• Sass hierarchy

• Use Shorthand

• Mixins

Use semantic variable names

We must understand the meaning of the variable. This should not be an abstract name but clearly understood.

// Bad
$e-pdn;

// Better
$title-padding-left;

When we using primary website colors, instead of describing what a variable looks like in the name, describe its function or purpose (if we decides to change color we will must understand what is variable means). In other words, try to choose semantic names for your variables.

// Bad
$red:red;
$yellow:yellow;

// Better
$brand-color:red;
$accent-color:yellow;

Adopt useful conventions

It's important to come up with some good conventions for naming your variables so that they are easy to remember.

For example, you can postfix color names with-color:

// Base colors
$border-color:#333;
$border-80-color:rgba($border-color,0.8);
$accent-color:yellow;

BUT!

The problem is the variables aren't reusable. What happens when decide to use #333 as the color for our buttons?

You can using Name That Color! Using this tool, rename our color variables! This tool has more than 1500 color names.

$lime:#b0eb00;
$bright-red:#b30015;
$dark-blue:#2a00b3;
$deep-cerulean:#0077b3;
$bondi-blue:#00b0b3;
$cyan:#24fbff;
$heliotrope:#8a7dff;
$silver-chalice:#a6a6a6;
$scorpion:#595959;
$tundora:#444;
$mine-shaft:#363636;
$cod-gray:#111;

Sass hierarchy

All component’s DOM selectors must pointed inside component selector with his ID.

Organize the Stylesheet with a Top-down Structure

It always makes sense to lay stylesheet out in a way that allows you to quickly find parts of your code. A top-down format that tackles styles as they appear in the source code. So, an example stylesheet might be ordered like this:

Generic classes (body, a, p, h1, etc.)

#header
#nav-menu
#main-content

Use Shorthand

You can shrink your code considerably by using shorthand when crafting your CSS. For elements like padding, margin, font and some others, you can combine styles in one line. For example, a div might have these styles:

//bad
.crayon {
    margin-left: 5px;
    margin-right: 7px;
    margin-top: 8px;
}       

//better
.crayon {
    margin: 8px 7px 0 5px;
}


//bad
.crayon {
    margin: 8px 7px 5px 7px;
}       

//better
.crayon {
    margin: 8px 7px 5px;
}

Mixins

Cross browser support. A mixin adds necessary prefixes for all browser support.

//BOX-SHADOW
@mixin box-shadow($top, $left, $blur, $color) {
    -webkit-box-shadow: $top $left $blur $color;
       -moz-box-shadow: $top $left $blur $color;
            box-shadow: $top $left $blur $color;
}


// BACKGROUND GRADIENT
@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
    background-color: $startColor;
    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
    background-image: -webkit-linear-gradient(top, $startColor, $endColor);
    background-image: -moz-linear-gradient(top, $startColor, $endColor);
    background-image: -ms-linear-gradient(top, $startColor, $endColor);
    background-image: -o-linear-gradient(top, $startColor, $endColor);
    background-image: linear-gradient(top, $startColor, $endColor);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}

Ability to dynamically define a stylistic variant of a component:

@mixin cta-button($color-text,$color-bg,$color-border, $color-text-hover,$color-bg-hover) {
    color: $color;
    border-color: $border-color;
    background-color: transparent;
    &:hover {
        color: $color-text-hover;
        background-color: $bg-color;
    }
}        

.button{
    @include cta-button(#000, #cc0000, #ccc, #fff, #000);
}