时间戳

首页 > 解决方案 > Sass：“.divTable-100%”之后的无效 CSS：预期的占位符名称，是“”

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

问题描述

请问，你对 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;
  }
}

标签： htmlcsssaas

解决方案

% 不是 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;
      }
    }

推荐阅读