Preprocessors helpers

Sass.sass

// ************* VARIABLE **************** //
$color: #FFF

// ******* ESCAPE CONCAT VAR ************ //

.test
    background: url(#{$path + 'file.jpg'})

// ********** COLOR FUNCTIONS *********** //

rgba(#ffcc00, .7)     // Return RGBA from the r,g,b,a channels
tint(#fd0cc7, 10%)    // Mix the given color with white.
shade(#fd0cc7, 10%)   // Mix the given color with black.
saturate(#00c, 20%)   // Saturate the given color by amount.
darken(#D62828, 50%)  // Darken the given color by amount.
lighten(#2c2c2c, 10%) // Lighten the given color by amount.
desaturate(#f00, 20%) // Desaturate the given color by amount.


// ********** This is a mixin *********** //

=inline
    display: inline
    float: left

// ************ Using mixin ************* //

.using-mixin-1
    +inline

.using-mixin-2
    +inline


// CSS Output
.using-mixin-1 {
    display: inline;
    float: left;
}

.using-mixin-2 {
    display: inline;
    float: left;
}
// End CSS Output


// ******** This is a placeholder ******** //
%inline
    +inline //Include a mixin

// ********* Using placeholder ********** //

.extend-placeholder-1
    @extend %inline

.extend-placeholder-2
    @extend %inline

// CSS Output
.extend-placeholder-1,
.extend-placeholder-2 {
    display: inline;
    float: left;
}
// End CSS Output

Sass.scss

// ************* VARIABLE **************** //
$color: #FFF;

// ******* ESCAPE CONCAT VAR ************ //

.test{
    background: url(#{$path + 'file.jpg'});
}

// ********** COLOR FUNCTIONS *********** //

rgba(#ffcc00, .7)     // Return RGBA from the r,g,b,a channels
tint(#fd0cc7, 10%)    // Mix the given color with white.
shade(#fd0cc7, 10%)   // Mix the given color with black.
saturate(#00c, 20%)   // Saturate the given color by amount.
darken(#D62828, 50%)  // Darken the given color by amount.
lighten(#2c2c2c, 10%) // Lighten the given color by amount.
desaturate(#f00, 20%) // Desaturate the given color by amount.


// ********** This is a mixin *********** //

@mixin inline(){
    display: inline;
    float: left;
}

// ************ Using mixin ************* //

.using-mixin-1{
    @include inline();
}

.using-mixin-2{
    @include inline();
}


// CSS Output
.using-mixin-1 {
    display: inline;
    float: left;
}

.using-mixin-2 {
    display: inline;
    float: left;
}
// End CSS Output


// ******** This is a placeholder ******** //
%inline{
    @include inline();
}

// ********* Using placeholder ********** //

.extend-placeholder-1{
    @extend %inline;
}

.extend-placeholder-2{
    @extend %inline;
}

// CSS Output
.extend-placeholder-1,
.extend-placeholder-2 {
    display: inline;
    float: left;
}
// End CSS Output

stylus.styl

// *********** GOOD PRATICES ************** //

https://gist.github.com/declandewet/7220997


// User $  to prepended variables
$color = #FFF

// User -  to prepended function
-function()


// ******* ESCAPE VAR ************ //

{$myVar}

// ******* CONCAT VAR ************ //

$var + var

.test
    background: url($path + 'file.jpg')

// ********** COLOR FUNCTIONS *********** //

rgba(#ffcc00, .7)     // Return RGBA from the r,g,b,a channels
tint(#fd0cc7, 10%)    // Mix the given color with white.
shade(#fd0cc7, 10%)   // Mix the given color with black.
saturate(#00c, 20%)   // Saturate the given color by amount.
darken(#D62828, 50%)  // Darken the given color by amount.
lighten(#2c2c2c, 10%) // Lighten the given color by amount.
desaturate(#f00, 20%) // Desaturate the given color by amount.


// **** Getting image width & height **** //

image-size("../images/header-bg.jpg")[0] //width

image-size("../images/header-bg.jpg")[1] //height


// ********** This is a mixin *********** //

inline()
    display: inline
    float: left

// ******* This is a placeholder ******** //

$inline
    display: inline
    float: left

// ************ Using mixin ************* //

.using-mixin-1
    inline()

.using-mixin-2
    inline()

// CSS Output
.using-mixin-1 {
    display: inline;
    float: left;
}

.using-mixin-2 {
    display: inline;
    float: left;
}
// End CSS Output

// ********* Using placeholder ********** //

.extend-placeholder-1
    @extend $inline

.extend-placeholder-2
    @extend $inline

// CSS Output
.extend-placeholder-1,
.extend-placeholder-2 {
    display: inline;
    float: left;
}
// End CSS Output