css - Sass 设计模式 : Conditional Selector List

Question

我经常需要使用条件构建 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;
}

Answer 1

假设您将前 3 个变量用于第二个目的(例如在其他地方生成选择器)，这会更简单:

$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():

$form-input-text: unquote('input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]');