0

私はRWDプロジェクトに取り組まなければなりません。このタスクを簡単にするために、LESS を使用する必要があるかどうか疑問に思っていました。CSS プリプロセッサを使用すると、RWD で作業するときに何か利点がありますか?
LESS ミックスインでメディア クエリを使用すると、時間を節約できるのではないかと思います。

4

1 に答える 1

1

特にコンパスを使用したSCSSは、非常に時間を節約できます。しかし、一部の人々はそれを混乱させるだけであり、学ぶべきいくつかの新しいことがあります。

網膜と非網膜の両方のスプライトを自動的に作成し、それらをメディアクエリにマッピングするコンパス用のミックスインをいくつか作成しました。これにより、テキストエディタとPhotoshopの両方で多くの時間を節約できました。スピリットについて詳しくは、こちらをご覧ください。

ミックスイン関数の使い方の例を次に示します。

@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);
    }
}

ヨーマンをインストールすることで、コンパスでSCSSを簡単に試すことができます。これにより、すべての基本的なSCSS設定が付属するプロジェクトを開始して、自分で試すことができます。

ただし、単独でインストールするのはそれほど難しくありません。必要なのはRubyだけです。

コメントの1つが指摘しているように、 thesassway.comはSCSS/SASSのガイドにとって非常に優れたリソースです。

于 2013-02-06T08:53:28.097 に答える