#less-sass.md

CSS, LESS, SASS (scss)

• variables
• nested styles
• mixins
• mixins with parameters
• functions
• colors functions

less-color-functions.less

// Color functions
@color: navy;
h1 {
    color: @color;
}
h2 { 
    color: lighten(@color, 20%);
}
h3 {
    color: lighten(@color, 30%);
}
h4 {
    color: lighten(@color, 40%);
}

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

less-functions.less

// Functions

.border-radius(@radius: 5px) {
    -mox-border-radius: @radius;
    -webkit-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}

less-mixies.less

// Mixins

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

header {
    color: #274D87;
    .commonTraits;
}

footer {
    color: #3264AF;
    .commonTraits;
}

less-mixim-with-parameters.less

// Parameterized Mixins 

// using regular arguments
.border-radius(@radius: 5px) {
    -mox-border-radius: @radius;
    -webkit-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}

// using named arguments with defaults
.customBorder(@color: black, @width: 1px) {
    border: @width solid @color;
}

// using the @arguments parameter
.box-shadow(@x: 0, @y: 0, @blur:1px, @color: #000) {
    -webkit-box-shadow: @arguments;
    -mox-box-shadow: @arguments;
    -ms-box-shadow: @arguments;
    box-shadow: @arguments;
}

#mypara {
    .border-radius;
    .customBorder(blue, 5px);
    .box-shadow(10px,10px,10px, gray);
    padding: 10px;
}

// Mixins with Pattern Matching

.alert(warning) {
    @color: goldenrod;
    color: @color;
    border-color: darken(@color, 10%);
}
.alert(error) {
    @color: red;
    color: lighten(@color, 10%);
    border-color: darken(@color, 20%);
}
.alert(other, @color) {
    color: lighten(@color, 10%);
    border-color: darken(@color, 20%);
}
.alert(@_) {
    display: block;
    border-width: 2px;
    border-style:solid;
    padding: 10px;
}

@type: error;
#mypara {
    .alert(@type);
}

// Guarded Mixins

.text3d(@color) when (lightness(@color) =< 50%) {
    color: @color;
    font-size: 32pt;
    border: 2px solid gray;
    text-shadow: 1px 1px 0px darken(@color, 5%),
                2px 2px 0px darken(@color, 10%),
                3px 3px 0px darken(@color, 15%),
                4px 4px 0px darken(@color, 20%),
                4px 4px 3px #000;
}
.text3d(@color) when (lightness(@color) > 50%) {
    color: @color;
    font-size: 32pt;
    border: 2px dashed gray;
    text-shadow: 1px 1px 0px lighten(@color, 5%),
                2px 2px 0px lighten(@color, 10%),
                3px 3px 0px lighten(@color, 15%),
                4px 4px 0px lighten(@color, 20%),
                4px 4px 3px #ccc;
}
.text3d(@_){
    font-size: 32pt;
    padding: 5pt;
} 
 
h1{
    .text3d(#666);
}

less-nested-styles.less

// 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;
    }
}

less-variables.less

// Variables

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

h1, h2 {
    color: @myColor1;
}

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

#mypara:after {
    content: @myStringVar;
}

sass-color-functions.scss

$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;
}

sass-functions.scss

// Functions

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

sass-mixim-with-parameters.scss

// Operations

$myColor: #f00;
$basepadding: 10px;
$basethickness: 4px;

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

$gender: boy;
$myColor: if($gender=="boy", #00f, #f00);
// Mixins with 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);
}

// Output Formating

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;
    }
}

sass-mixim.scss

// Mixins

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

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

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

sass-nested-styles.less

// 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;
    }
}

sass-variables.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;
}