How useful are CSS pre-processors (ASS, SCSS, LESS) for Responsive Web Design? -

How useful are CSS pre-processors (ASS, SCSS, LESS) for Responsive Web Design? -

i have work on rwd project. wondering whether should utilize less create task easier. using css preprocessors offer advantages while working on rwd? i have hunch using media queries in less mixins might time-saving.

i find them time-saving, scss compass. people find confusing, , there new things learn.

i made mixins compass automatically makes both retina , non-retina sprites , maps them media queries, has helped me save lot of time both in text editor , in photoshop. you can read more spriting here.

here illustration of how used mixin function.

@mixin pixel-ratio($ratio: 1.5) { $dpi: $ratio * 96; $opera-ratio: $ratio * 100; @media screen , (-webkit-min-device-pixel-ratio: #{$ratio}), screen , ( min--moz-device-pixel-ratio: #{$ratio}), screen , (-o-min-device-pixel-ratio: '#{$opera-ratio}/100'), screen , ( min-device-pixel-ratio: #{$ratio}), screen , ( min-resolution: #{$dpi}dpi), screen , ( min-resolution: #{$ratio}dppx) { @content; } } @include pixel-ratio() { //code here }

i have mixin, makes media queries both normal , retina version, i'm not sure final one, should give thought how easy utilize 1 time started.

// usage: @include retina-sprite($name); @mixin retina-sprite($name, $offset-x: 0, $offset-y: 0, $downscale-adjust: 0, $map: $sprite-sprites, $mapx2: $sprite-retina-sprites) { background-image: sprite-url($map); background-position: sprite-position($map, $name); background-repeat: no-repeat; display: block; height: (image-height(sprite-file($map, $name)) ); width: image-width(sprite-file($map, $name)); @include pixel-ratio() { // workaround https://gist.github.com/2140082 @if (sprite-position($map, $name) != sprite-position($mapx2, $name)) { $posx: round(nth(sprite-position($mapx2, $name, 0, 2 * $offset-x), 1) / 2); $posy: round(nth(sprite-position($mapx2, $name, 0, 2 * $offset-y), 2) / 2); background-position: $posx $posy; } // set image size orginal size of image @include background-size(floor(image-width(sprite-path($map)) - $downscale-adjust) auto); background-image: sprite-url($mapx2); } }

you can seek out scss compass easy way installing yeoman. allows init project comes basic scss settings, , can seek yourself.

however not hard install itself, need ruby.

as 1 of comments point out thesassway.com pretty resource guides on scss/sass.

css responsive-design less