Базовые классы для LESS

Если Вам не знакомо слово LESS - этот сниппет вам ничего полезного не даст)
.border-radius( @radius: 3px ) {
    -webkit-border-radius: @radius;
       -moz-border-radius: @radius;
            border-radius: @radius;        
}

.outline-radius( @radius: 3px ) {
    -webkit-outline-radius: @radius;
       -moz-outline-radius: @radius;
            outline-radius: @radius;        
}

.box-shadow( 
    @x : 2px, 
    @y : 2px, 
    @blur : 5px, 
    @spread : 0, 
    @color : rgba(0,0,0,.6) 
) {
    -webkit-box-shadow: @x @y @blur @spread @color;
       -moz-box-shadow: @x @y @blur @spread @color;    
            box-shadow: @x @y @blur @spread @color;    
}

.transition(
    @what : all,
    @length : 1s,
    @easing : ease-in-out
) {
    -webkit-transition: @what @length @easing;
       -moz-transition: @what @length @easing;
         -o-transition: @what @length @easing;
              transition: @what @length @easing;            
}

.transform(
    @params 
) {
    -webkit-transform: @params;
         -moz-transform: @params;
              transform: @params;
}

.box(
    @orient : horizontal,
    @pack : center,
    @align : center
) {
    display: -webkit-box;
       display: -moz-box;    
            display: box;

    -webkit-box-orient: @orient;
       -moz-box-orient: @orient;
               box-orient: @orient;
               
    -webkit-box-pack: @pack;
       -moz-box-pack: @pack;
            box-pack: @pack;        
            
    -webkit-box-align: @align;
       -moz-box-align: @align;
            box-align: @align;        
}

.flex( @val : 1 ) {
    -webkit-box-flex: @val;
       -moz-box-flex: @val;
            box-flex: @val;
}

.resize( @direction ) {
    -webkit-resize: @direction;
       -moz-resize: @direction;
            resize: @direction;
}

.linear-gradient( 
    @begin: black, 
    @end: white,
    @switch : 100%
) {
    background:  @begin;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end));
    background: -moz-linear-gradient(top, @begin, @end @switch);
    background: -o-linear-gradient(top, @begin, @end @switch);
    background: linear-gradient(top, @begin, @end @switch);
}
    
.double-borders( 
    @colorOne : green,
    @colorTwo : red,
    @radius : 0
) {
    border: 1px solid @colorOne;
        
    -webkit-box-shadow: 0 0 0 1px @colorTwo;    
       -moz-box-shadow: 0 0 0 1px @colorTwo;
               box-shadow: 0 0 0 1px @colorTwo;
               
    .border-radius( @radius );
}

.triple-borders( 
    @colorOne : green,
    @colorTwo : red,
    @colorThree : blue,
    @radius : 0
) {
    border: 1px solid @colorOne;
    
    .border-radius( @radius );

    -webkit-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;    
       -moz-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
               box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
}

.columns(
    @count : 3,
    @gap : 10
) {
    -webkit-column-count: @count;
       -moz-column-count: @count;
            column-count: @count;

    -webkit-column-gap: @gap;
       -moz-column-gap: @gap;
            column-gap: @gap;
}

.box-sizing( @type : border-box ) {
    -webkit-box-sizing: @type;
       -moz-box-sizing: @type;
            box-sizing: @type;        
}