Sass：“.divTable-100%”之后的无效 CSS：预期的占位符名称，是“”答案

【问题标题】：Sass: Invalid CSS after ".divTable-100%": expected placeholder name, was " "Sass：“.divTable-100%”之后的无效 CSS：预期的占位符名称，是“”
【发布时间】：2019-09-04 13:11:57
【问题描述】：

请问您对 Sass 源代码有什么问题有什么建议吗？

我想动态更改表格宽度。但是出现了错误：

错误：“.divTable-100%”后的 CSS 无效：预期占位符名称，在第 18 行是“”...

谢谢！

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

【问题讨论】：

Which characters are valid in CSS class names/selectors?的可能重复

标签： html css saas

【解决方案1】：

% 不是 class name 的有效字符，因为您使用的是 map ，所以将键用作类的名称，将值用作 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;
      }
    }

【讨论】：

【解决方案2】：

我认为“#”是 .divTable-#{$size} 中的无效 css 字符。因为它应该给你一个像“.divTable-#large”这样的类名

【讨论】：