https://en.wikipedia.org/wiki/Less_(stylesheet_language)
    http://lesscss.org/functions/
    http://webdesign.tutsplus.com/tutorials/a-deeper-look-at-less-mixins--cms-22882

For My Used Less compilers see:
    BundleConfig.cs using the dotless compiler for .net 
    and  Web Compiler visual studio extension

LESS always tries to keep its syntax and features so that it closely mimics CSS.
Hence a mixin in LESS is declared in the same way as we declare a CSS style rule using a class or an ID selector.
Both of the following examples are valid LESS mixins:

    .border {
         border: 1px solid #ccc;
    }
    #shadow {
        -webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.2);
        box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.2);
    }

Click Below Link to see all my CSS/LESS examples

For codePen ref
    https://blog.codepen.io/documentation/
    https://css-tricks.com/video-screencasts/112-using-codepen/