Skip to content

Instantly share code, notes, and snippets.

@robhrt7

robhrt7/preprocessors-cheatsheet.scss

Last active June 25, 2019 05:18
Download ZIP

Revisions

  1. robhrt7 revised this gist Feb 18, 2014. 1 changed file with 24 additions and 24 deletions.
    48 changes: 24 additions & 24 deletions preprocessors-cheatsheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -7,8 +7,8 @@
    // ----------------------------------------------------------------------------------

    .somecode {

    }
    }

    // /Level 1
    // ----------------------------------------------------------------------------------
    @@ -19,8 +19,8 @@
    // --------------------------------------------------

    .somecode {

    }
    }

    // /Level 2

    @@ -29,17 +29,17 @@
    // level 3

    .somecode {

    }
    }

    // /level 3



    // Level 4
    .somecode {

    }
    }



    @@ -48,13 +48,13 @@
    // =====================================================================

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



    @@ -101,15 +101,15 @@ $fz-l: 16px;
    // Media queries
    // ---------------------------------------------------------------------
    @mixin breakpoint($point) {
    @if $point == s {
    @media (max-width: 1600px) { @content; }
    }
    @else if $point == m {
    @media (max-width: 1250px) { @content; }
    }
    @else if $point == l {
    @media (max-width: 650px) { @content; }
    }
    @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 {
  2. robhrt7 created this gist Feb 18, 2014.
    120 changes: 120 additions & 0 deletions preprocessors-cheatsheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,120 @@
    //
    // 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 == s {
    @media (max-width: 1600px) { @content; }
    }
    @else if $point == m {
    @media (max-width: 1250px) { @content; }
    }
    @else if $point == l {
    @media (max-width: 650px) { @content; }
    }
    }

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