css - Sass 设计模式：条件选择器列表

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"]');