Question

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

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

theme_1.css
theme_2.css

每个CSS文件都是从其各自的SCSS文件中编译的 - 该文件包含一个名为$body-container的变量。

$body-container: .body-container;

如果变量存在，那么它应该附加到body标签。

这是我到目前为止尝试过的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 "} {"

Answer 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;
}

将变量的值附加到选择器@if it exists（使用变量存在）

1 个答案: