sass spacing helper – margin and padding

// // margin and padding helper classes // @for $i from 1 through 10 { $pixel: $i * 5; .mt#{$pixel} { margin-top: #{$pixel}px; } .mr#{$pixel} { margin-right: #{$pixel}px; } .mb#{$pixel} { margin-bottom: #{$pixel}px; } .ml#{$pixel} { margin-left: #{$pixel}px; } .pt#{$pixel} { padding-top: #{$pixel}px; } .pr#{$pixel} { padding-right: #{$pixel}px; } .pb#{$pixel} 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…