1

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;
  }
}
Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
Tomáš Jalč
  • 118
  • 6
  • 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

2 Answers2

2

% 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;
      }
    }
Tarun Khosla
  • 1,274
  • 7
  • 10
0

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

Nico Baudon
  • 57
  • 1
  • 10