Icon/Sprite Module (after SMACSS) in LESS

icon.less

/**
 * Icon module.
 *
 * Class: icon, Prefix: icn-.
 *
 * https://home.ninginc.com/display/ENG/Yoko+Styleguide#YokoStyleguide-Icon
 *
 */

.icon {
    display: inline-block;
    background-repeat: no-repeat;
    line-height: 0;
    vertical-align: bottom;
    background-image: url(sprite.png);
    html.svg & {
        background-image: url(sprite.svg);
    }
}

@icn-grid: 100px;
@icn-nominal: 64px;
@icn-sprite-width: 4*@icn-grid;

.icn-position ( @row, @col, @w, @h ) {
    background-position: -((@col+.5)*(@icn-grid*@h/@icn-nominal) - @w/2)
                         -((@row+.5)*(@icn-grid*@h/@icn-nominal) - @h/2);
}

.icn-size( @w, @h ) {
    width: @w;
    height: @h;
    background-size: @icn-sprite-width * (@h/@icn-nominal);
}

.icn-sprite( @row, @col, @w, @h ) {
    .icn-size( @w, @h );
    .icn-position( @row, @col, @w, @h );
}

.icn-defn ( @row, @w, @h ) {
    .icn-sprite( @row, 0, @w, @h );
}

.icn-flag ( @row, @w, @h, selected ) {
    .is-selected > & {
        .icn-position( @row, 1, @w, @h );
    }
}

.icn-flag ( @row, @w, @h, hover ) {
    :focus > &,
    :hover > & {
        .icn-position( @row, 2, @w, @h );
    }
}

.icn-flag ( @row, @w, @h, active ) {
    :active > & {
        .icn-position( @row, 3, @w, @h );
    }
}

.icn-defn ( @row, @w, @h, @flag ) {
    .icn-defn( @row, @w, @h );
    .icn-flag( @row, @w, @h, @flag );
}

.icn-defn ( @row, @w, @h, @flag1, @flag2 ) {
    .icn-defn( @row, @w, @h, @flag1 );
    .icn-flag( @row, @w, @h, @flag2 );
}

.icn-defn ( @row, @w, @h, @flag1, @flag2, @flag3 ) {
    .icn-defn( @row, @w, @h, @flag1, @flag2 );
    .icn-flag( @row, @w, @h, @flag3 );
}

.icn-add        { .icn-defn( 0, 16px, 16px, hover, active ); }
.icn-comment    { .icn-defn( 1, 20px, 16px, hover, active ); }
.icn-trash      { .icn-defn( 2, 16px, 16px, hover, active ); }
.icn-share      { .icn-defn( 3, 20px, 16px, hover, active ); }
.icn-tick       { .icn-defn( 4, 16px, 16px, selected ); }
.icn-edit       { .icn-defn( 5, 16px, 16px, hover, active ); }
.icn-close      { .icn-defn( 6, 16px, 16px, hover ); }