0

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

4

1 回答 1

1

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

我为 compass 制作了一些 mixin，可以自动生成视网膜和非视网膜精灵并将它们映射到媒体查询，这帮助我在文本编辑器和 Photoshop 中节省了大量时间。您可以在此处阅读有关精灵的更多信息。

这是我如何使用 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 设置的项目，然后您可以自己尝试一下。

但是它本身并不难安装，它只需要 Ruby。

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

于 2013-02-06T08:53:28.097 回答