Preprocessors style guide cheatsheet

preprocessors-cheatsheet.scss

//
//	Preprocessors style guide cheatsheet
//	=============================================================================================
//

// Level 1
// ----------------------------------------------------------------------------------

.somecode {
    
    }

// /Level 1
// ----------------------------------------------------------------------------------



// Level 2
// --------------------------------------------------

.somecode {
    
    }

// /Level 2



// level 3

.somecode {
    
    }

// /level 3



// Level 4
.somecode {
    
    }



// =====================================================================
// Nesting
// =====================================================================

.weather {
    .cities {
        li {
            // Maximum 3 nested levels
            // Maximum 50 lines of nested CSS
            }
        }
    }



// =====================================================================
// GLOBALS
// =====================================================================

// Links
// ---------------------------------------------------------------------

// basic
$al: '#eb722e'; //action link
$al_h: '#b84819'; //action hover

// aux
$o: '#449f14'; //object link
$o_h: '#32710d'//object hover



// Colors
// ---------------------------------------------------------------------
$tcolor: #000;
$tcolor-l1: lighten($tcolor, 20%);

$tcolor-i: #fff; //inverted

$pallete-color-1: #FF4900;
$pallete-color-2: #FFA700;



// Font sizes
// ---------------------------------------------------------------------
$fz-s: 12px;
$fz-m: 14px;
$fz-l: 16px;


// =====================================================================
// Mixins
// =====================================================================

// Media queries
// ---------------------------------------------------------------------
@mixin breakpoint($point) {
    @if $point == l {
        @media (max-width: 1600px) { @content; }
    }
    @else if $point == m {
        @media (max-width: 1250px) { @content; }
    }
    @else if $point == s {
        @media (max-width: 650px)  { @content; }
    }
}

// .module {
//   width: 25%;
//   @include breakpoint(s) {
//     width: 100%;
//   }
// }