Kevin Powell - Community•3y ago

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•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•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•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 EfeOP•3y ago

thanks everyone

Gaming

Programming

nested scss doesn't work as expected