2

条件を使用して CSS グループ セレクターを作成する必要がよくあり、より効率的なコーディング パターンを探しています。

たとえば、、、および要素をリセット/正規化するかどうかを切り替える構成ファイルがaudioありcanvasますvideo。

$normalize-html5-audio-element: false;
$normalize-html5-canvas-element: true;
$normalize-html5-video-element: true;

次に、_normalize.scssパーシャルでは、true に設定された要素のみを含むグループ セレクターが必要です。

私はそれを非常に簡単な方法で解決しましたが、扱いにくく、簡単に拡張することはできません。誰かがより良い方法を提案できますか?

%normalize-html5-media {
    display: inline-block;
    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
        *display: inline;
        *zoom: 1;
    }
}

$html5-media-selector: null;

@if $normalize-html5-audio-element {
    $html5-media-selector: audio;
}
@if $normalize-html5-canvas-element {
    @if $html5-media-selector {
        $html5-media-selector: #{$html5-media-selector}, canvas;
    } @else {
        $html5-media-selector: canvas;
    }
}
@if $normalize-html5-video-element {
    @if $html5-media-selector {
        $html5-media-selector: #{$html5-media-selector}, video;
    } @else {
        $html5-media-selector: video;
    }
}

#{$html5-media-selector} {
    @extend %normalize-html5-media;
}
4

1 に答える 1

2

最初の 3 つの変数を 2 番目の目的 (他の場所でセレクターを生成するなど) に使用していると仮定すると、これはより簡単になります。

$html5-media-selector: ();

@if $normalize-html5-audio-element {
    $html5-media-selector: append($html5-media-selector, audio, comma);
}
@if $normalize-html5-canvas-element {
    $html5-media-selector: append($html5-media-selector, canvas, comma);
}
@if $normalize-html5-video-element {
    $html5-media-selector: append($html5-media-selector, video, comma);
}

#{$html5-media-selector} {
    @extend %normalize-html5-media;
}

または：

@if $normalize-html5-audio-element {
    audio {
        @extend %normalize-html5-media;
        // other extends/styles
    }
}
@if $normalize-html5-canvas-element {
    canvas {
        @extend %normalize-html5-media;
        // other extends/styles
    }

@if $normalize-html5-video-element {
    video {
        @extend %normalize-html5-media;
        // other extends/styles
    }
}

さもないと：

$html5-media-selector: audio, video !default;

#{$html5-media-selector} {
    @extend %normalize-html5-media;
}

セレクターが単に要素を参照するよりも複雑になる場合は、unquote()追加する前にand を引用する必要があることに注意してください。

$form-input-text: unquote('input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]');
于 2013-07-26T18:54:13.673 に答える