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

Question

Please, do you have any suggestions what is wrong in Sass source code?

I want to change table width dynamically. But error has occurred:

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

Thank you !

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

Possible duplicate of [Which characters are valid in CSS class names/selectors?](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) — misorude, Sep 04 '19 at 13:16

score 2 · Accepted Answer · answered Sep 04 '19 at 13:36

% is not a valid character for class name , since you are using a map , use the keys as name of class and the values as CSS values. Hope this helps.

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

score 0 · Answer 2 · answered Sep 04 '19 at 13:22

0

I think that "#" is an invalide css character in .divTable-#{$size}. Because It should give you a class name like ".divTable-#large"

answered Sep 04 '19 at 13:22

Nico Baudon

57
1
10

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

2 Answers2