css - 将变量的值附加到选择器@如果它存在(使用变量存在)

Question

我正在尝试将类名添加到 SCSS(如果存在)。

使用输出 2 个 CSS 文件的基本框架。

• 主题_1.css
• 主题_2.css

每个 CSS 文件都是从其各自的 SCSS 文件编译而来 - 该文件要么包含名为 $body-container 的变量，要么不包含。

$body-container: .body-container;

如果变量存在，则应将其附加到正文标记。

这是我迄今为止尝试过的 SCSS

body @if(variable-exists(body-container)) { $body-container } {
  /* styles here */
}

我期待以下内容:

对于包含变量的SCSS文件

body .body-container {
    /* styles here */
}

并且没有声明变量

body {
    /* styles here */
}

但出现以下错误错误:“...body-container”后的 CSS 无效:预期为“:”，为“} {”

Answer 1

正如我的评论中提到的，我认为不可能以这种方式将变量附加到选择器(所讨论的选择器)。错误消息表明它需要在变量名称后添加 :，这意味着它需要对 @if 中的变量进行赋值> 循环。

话虽如此，仍然可以使用以下解决方法来实现此目的。这个想法是查看变量是否已定义，如果是，则设置另一个虚拟变量 ($selector) 作为 body 和原始变量 ($主体容器)值。如果没有，则将其设置为body。

然后我们可以通过插值来使用这个虚拟变量($selector)。因此，如果已定义$body-container，则选择器将为body .body-container。否则，它就只是body。

$body-container: ".body-container";
@if variable-exists(body-container) {
  $selector: "body " + $body-container !global;
}

@else {
  $selector: "body" !global;
}

#{$selector} {
  color: red;
}