Cacher is the code snippet organizer for pro developers

//	to run Sass
//	1st:	install ruby (from http://rubyinstaller.org/) + add to PATH
//	2nd:	install sass ('[sudo] gem install sass')
//	3nd:	watch scss files (sass --watch {watchedDir[\watchedFile]}:{destDir[\destFile]})
//    --style expanded/compact/compressed (set the format of the output .css file)

// Importing External Files

// import the SASS definitions used in this style sheet
@import "import_me.scss";

// Variables

$myColor1: navy;                            // named color value
$myColor2: #000080;                         // hex color value
$myStringVar: " with an appended string";   // string variable 
$myFontSize: 18px;                          // numeric value
$thinBorder: 1px solid $myColor1;           // multi-value variable
$paddingVar: 15px 15px 15px 15px;           // multi-value variable

h1, h2 {
    color: $myColor1;
}

#mypara {
    font-size: $myFontSize;
    border: $thinBorder;
    padding: $paddingVar;
}

#mypara:after {
    content: $myStringVar;
}


// Nested Styles

body {
    font-family: Helvetica, Arial, sans-serif;
    
    p {
        font-family:Times;
    }
    p#mypara {
        font-family: "Courier New";
    }
}

#mypara {
    color: #404040;
    border: 1px solid #404040;
    padding: 10px;
    
    &:hover {
        color: red;
    }
}


// Mixins

@mixin commonTraits {
    border-radius: 10px;
    border: 1px solid green;
    padding: 10px;
}

header {
    color: #274D87;
    @include commonTraits;
}

footer {
    color: #3264AF;
    @include commonTraits;
}


// Operations

$gender: boy;
$myColor: if($gender=="boy", #00f, #f00);
$basepadding: 10px;
$basethickness: 4px;

#mypara {
    color: $myColor;
    border: $basethickness solid $myColor;
    padding: $basepadding;
}


// Mixins with Arguments

// using regular arguments
@mixin customBorder ($width, $color, $style) {
    border: {
        width: $width;
        color: $color;
        style: $style;
    }
}

// using named arguments with defaults
@mixin customBorder2 ($width: 1px, $color: black, $style: solid) {
    border: {
        width: $width;
        color: $color;
        style: $style;
    }
}

#mypara {
    @include customBorder(3px, blue, dotted);
}

// OR with explicit parameter names / missing parameters

#mypara {
    @include customBorder($width: 3px, /* left default for $color */ $style: dotted);
}

// Functions
@mixin border-radius($radius: 5px) {
    -mox-border-radius: $radius;
    -webkit-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

// Color functions
$color: navy;
h1 {
    color: $color;
    background-color: grayscale(invert($color));
}
h2 { 
    color: lighten($color, 20%);
}
h3 {
    color: lighten($color, 30%);
}
h4 {
    color: lighten($color, 40%);
}

#mypara {
    @include border-radius;
    border-color: hsl(hue($color), 45%, 60%);
    border-width: 2px;
    border-style:solid;
    padding: 10px;
}