KPC
Kevin Powell - Community•3y ago
Mert Efe

nested scss doesn't work as expected

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;

    &-1 {
        width: 110px;
    }

    &-2 {
        width: 120px;
    }
    &-3 {
        width: 130px;
    }
    &-4 {
        width: 140px;
    }
    &-5 {
        width: 150px;
    }
}
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;

    &-1 {
        width: 110px;
    }

    &-2 {
        width: 120px;
    }
    &-3 {
        width: 130px;
    }
    &-4 {
        width: 140px;
    }
    &-5 {
        width: 150px;
    }
}
ellipsis-1 doesn't carry the main properties
4 Replies
MarkBoots
MarkBoots•3y ago
that's correct, because when this is compiled, you'll get 
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.ellipsis-1 { width: 110px }
.ellipsis-2 { width: 120px }
.ellipsis-3 { width: 130px }
.ellipsis-4 { width: 140px }
.ellipsis-5 { width: 150px }
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.ellipsis-1 { width: 110px }
.ellipsis-2 { width: 120px }
.ellipsis-3 { width: 130px }
.ellipsis-4 { width: 140px }
.ellipsis-5 { width: 150px }
your element needs both classes 
<div class="ellipsis ellipsis-1">
<div class="ellipsis ellipsis-1">
other option would be 
[class*="ellipsis"]{
  overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}
.ellipsis {
    &-1 { width: 110px }
    &-2 { width: 120px }
    &-3 { width: 130px }
    &-4 { width: 140px }
    &-5 { width: 150px }
}
[class*="ellipsis"]{
  overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}
.ellipsis {
    &-1 { width: 110px }
    &-2 { width: 120px }
    &-3 { width: 130px }
    &-4 { width: 140px }
    &-5 { width: 150px }
}
` 
<div class="ellipsis-1">
<div class="ellipsis-1">
vince
vince•3y ago
You could also make a mixin 
@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
Then in your partial file: 
.ellipsis-1 {
  @include ellipsis();
}
.ellipsis-1 {
  @include ellipsis();
}
Kevin Powell
Kevin Powell•3y ago
And just to throw one more option into the mix, you could also use an extend 😄 
%ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.ellipsis {
  &-1 {
    @extend %ellipsis;
    width: 110px;
  }
  &-2 {
    @extend %ellipsis;
    width: 120px;
  }
}
%ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.ellipsis {
  &-1 {
    @extend %ellipsis;
    width: 110px;
  }
  &-2 {
    @extend %ellipsis;
    width: 120px;
  }
}
You need to be careful with extends, but in this situation it would work fine
Mert Efe
Mert EfeOP•3y ago
thanks everyone

Did you find this page helpful?