public
Created

LESS vs CSS

  • Download Gist
less.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
/* less file */
.my_mixin {
display: block;
text-indent: -9999em;
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
overflow: hidden;
}
h1 a, .pagination em, .cog a {
.my_mixin
}
 
/* css file */
.my_mixin {
display: block;
text-indent: -9999em;
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
overflow: hidden;
}
h1 a, .pagination em, .cog a {
display: block;
text-indent: -9999em;
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
overflow: hidden;
}

Sure, my point is that the style of writing I interpreted LESS to encourage is not to group selectors with similar styles and instead turn repeated styles into mixins early-on in development, then adding the mixin to the appropriate declaration right then and there as you write your styles. So mixins take the place of grouping global styles. Image-replacement is an extreme example. In my next LESS project, I wont embed image-replacement into declarations, I'll stay traditional with it...I'll try to keep my mixins to less than 3 properties to avoid code-bloat.

I wrote things like

(line 20 of LESS file) h1 a { .ir; position: relative; margin-bottom: 20px; }
(line 540 of LESS file) .pagination em { .ir; position: absolute; top: 10px; right: 0; }
(line 800 of LESS file) .cog a { .ir; position: absolute; bottom: 0; left: 10px; }

instead of grouping as you provided in your example.

Yes!! Me too. Seems to solve the problem

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.