Sass：“.divTable-100%”后的 CSS 无效：预期的占位符名称为“”

Question

拜托，您有什么建议 Sass 源代码有什么问题吗？

我想动态更改 table 宽度。但是发生了错误：

Error: Invalid CSS after ".divTable-100%": expected placeholder name, was " " on line 18 of...

谢谢！

$tableWidth: () !default;

$tableWidth: map-merge(
  (
    "large": 100%,
    "medium": 75%,
    "small": 50%,
    "extraSmall": 25%
  ),
  $tableWidth
);

@mixin tableStyles {
  margin-top: 25px;
  display: table;
  color: $tableColor;
  border: $clBtnBorder;
}

@each $size, $size in $tableWidth {
  .divTable-#{$size} {
    width: $size !important;
    @include tableStyles;
  }
}

Answer 1

我认为“#”是 .divTable-#{$size} 中的无效 css 字符。因为它应该给你一个 class 名称，例如“.divTable-#large”

Answer 2

% 不是 class 名称的有效字符，因为您使用的是地图，请将键用作 class 的名称，将值用作 CSS 值。希望这有帮助。

   $tableWidth: () !default;

    $tableWidth: map-merge(
      (
        "large": 100%,
        "medium": 75%,
        "small": 50%,
        "extraSmall": 25%
      ),
      $tableWidth
    );

    @mixin tableStyles {
      margin-top: 25px;
      display: table;
      color: $tableColor;
      border: $clBtnBorder;
    }

    @each $name, $size in $tableWidth {
      .divTable-#{$name} {
        font-size: $size;
        height: $size;
        width: $size;
      }
    }

Sass：“.divTable-100%”后的 CSS 无效：预期的占位符名称为“”

Sass: Invalid CSS after ".divTable-100%": expected placeholder name, was " "

html

css

saas