将变量的值附加到选择器@如果它存在（使用变量存在）答案

【问题标题】：Append a variable's value to a selector @if it exists (using variable-exists)将变量的值附加到选择器@如果它存在（使用变量存在）
【发布时间】：2016-06-10 15:28:50
【问题描述】：

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

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

theme_1.css
theme_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 */
}

但是得到以下错误Error: Invalid CSS after "...body-container ": expected ":", was "} {"

【问题讨论】：

我认为您不能将变量附加到这样的选择器。但是，您可以执行 this 之类的操作（请注意，我只是 Sass/SCSS 的初学者，可能有更好的方法来做到这一点）。
很好地解决了这个问题。谢谢！ +1
我会等待一段时间，看看是否有更好的答案。如果没有，我会发布我的解决方法作为答案:)
我将其稍微更改为：$selector: "body " + $body-wrapper !global; 并设置了一个变量 $body-wrapper: ".bodywrapper"; 只是次要但允许我使用与值不同的变量名。也可以帮助其他人。

标签： css sass

【解决方案1】：

正如我在评论中提到的，我认为不可能以这种方式将变量附加到选择器（所使用的选择器）。错误消息表明它期望在变量名之后有一个:，这意味着它期望对@if 循环内的变量进行赋值。

话虽如此，使用以下解决方法仍然可以实现此目的。想法是查看变量是否已定义，如果是，则将另一个虚拟变量 ($selector) 设置为 body 和原始变量 ($body-container) 值的串联。如果不是，则将其设置为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;
}

【讨论】：