Question

我必须处理一个RWD项目。我想知道是否应该使用LESS来简化这项任务。使用CSS预处理器在使用RWD时是否具有任何优势？
我有一种预感，即在LESS mixins中使用媒体查询可能会节省时间。

Answer 1

我发现它们非常节省时间，尤其是SCSS Compass。但是有些人发现它令人困惑，还有一些新的东西需要学习。

我为指南针做了一些mixins，自动制作视网膜和非视网膜精灵并将它们映射到媒体查询，这有助于我在文本编辑器和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
}

我也有这个mixin，它对普通和视网膜版本进行媒体查询，我不确定它是最后一个，但它应该让你知道一旦你是多么容易使用启动。

// 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轻松尝试使用Compass的SCSS。这允许您初始化一个带有所有基本SCSS设置的项目，然后您可以自己尝试。

然而install本身并不难，只需要Ruby。

正如其中一条评论所指出的那样thesassway.com对于SCSS / SASS指南来说是一个非常好的资源。

CSS预处理器（ASS，SCSS，LESS）对响应式Web设计有多大用处？

1 个答案: