CSS預處理器（ASS，SCSS，LESS）對響應式網頁設計有用嗎？

Question

我必須在RWD項目上工作。我想知道是否應該使用LESS來簡化這項任務。使用CSS預處理器在使用RWD時有什麼優勢？
我有一個預感，在LESS mixins中使用媒體查詢可能節省時間。

Answer 1

我覺得它們非常省時，尤其是SCSS與Compass。但有些人覺得很混亂，還有一些新的東西需要學習。

我爲指南針做了一些mixin，可以自動製作視網膜和非視網膜精靈，並將它們映射到媒體查詢，這幫助我在文本編輯器和Photoshop中節省大量時間。 You can read more about the spriting here.

這裏是我如何使用mixin函數的一個例子。

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

@include pixel-ratio() { 
    //Code here 
} 

我也有這樣的混入，這使得媒體查詢的正常和視網膜的版本，我不知道，這是最後一個，但它應該給你這件事是多麼容易的想法一旦你開始使用。

// 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 for 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 to the orginal size of the image 
     @include background-size(floor(image-width(sprite-path($map)) - $downscale-adjust) auto); 
     background-image: sprite-url($mapx2); 
    } 
} 

您可以通過安裝Yeoman，以簡單的方式試用SCSS和Compass。這使您可以啓動一個包含所有基本SCSS設置的項目，然後您可以自己嘗試。

然而，它本身並不難，它只是需要Ruby。

正如其中一條意見也指出thesassway.com是SCSS/SASS指南的一個很好的資源。