KPC
Kevin Powell - Community•6d ago
MC23

CSS class is ignored

I define my classes like this:
// Single select
$ss-w-sm: 125px;
$ss-w-md: 147px;
$ss-w-lg: 180px;
$ss-w-xl: 200px;
$ss-w-2xl: 225px;

// Mixin to assign to a modifier a specific width
@mixin component-sizes {
  &--sm { width: $ss-w-sm; }
  &--md { width: $ss-w-md; }
  &--lg { width: $ss-w-lg; }
  &--xl { width: $ss-w-xl; }
  &--2xl { width: $ss-w-2xl; }
}

.mat-select {
  @include component-sizes;
}
// Single select
$ss-w-sm: 125px;
$ss-w-md: 147px;
$ss-w-lg: 180px;
$ss-w-xl: 200px;
$ss-w-2xl: 225px;

// Mixin to assign to a modifier a specific width
@mixin component-sizes {
  &--sm { width: $ss-w-sm; }
  &--md { width: $ss-w-md; }
  &--lg { width: $ss-w-lg; }
  &--xl { width: $ss-w-xl; }
  &--2xl { width: $ss-w-2xl; }
}

.mat-select {
  @include component-sizes;
}
Then use it normally like this
<mat-form-field appearance="outline" class="mat-select--2xl">
<mat-form-field appearance="outline" class="mat-select--2xl">
But the rendered element ignores it:
No description
1 Reply
MC23
MC23OP•6d ago
I thought the 2 was the problem, but if I replace it with x it still doesn't work. I cleared cache, re-compiled Angular app and also tried it on a incognito windows of a browser I usually never use. NOTE: if I edit the class from devtools and I add 2 in front of it, it works fine and applies the proper style After a PC reboot it seems to work, really weird

Did you find this page helpful?