less helpers – spacings

// // spacing helpers // @spacings: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50; // mixin to iterate over colors and create CSS class for each one .generate-spacing-helpers(@i: length(@spacings)) when (@i > 0) { .generate-spacing-helpers(@i – 1); @name: extract(@spacings, @i); @space: unit(extract(@spacings, @i), px); // margin .mt-@{name} Read more…

SASS and LESS mixin for transitions

Better than pure CSS ist, to write LESS or SASS/SCSS. Here are some mixins … SCSS: @mixin transition($property: all, $duration: 500ms, $type: linear) { -webkit-transition: $property $duration $type; -moz-transition: $property $duration $type; -o-transition: $property $duration $type; transition: $property $duration $type; } LESS: .transition (@property: all, @duration: 500ms, @type: linear) { Read more…

less helper for responsive development

I use the following 2 mixins for┬áresponsive development (e.g. with bootstrap): .do-this-until-width(@max-width, @rules) { @media (max-width: @max-width) { @rules(); } } .do-this-after-width(@min-width, @rules) { @media (min-width: @min-width) { @rules(); } } Example: div.my-div { text-align: center; float: none; .do-this-after-width(@screen-xs-max, { text-align: left; float: left; }); }  

more semantic html with less and bootstrap

Classic Bootstrap: <div class=”container”> <div class=”row”> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> </div> </div> More semantic version: // import all bootstrap less files first @import “less/bootstrap”; // build Read more…