SASS - Outputting to the same declaration?

Question

I'm trying to get this CSS file to have both .box-shadow and .card-box-shadow .pagebuilder-column on the same declaration but haven't really found a way, other than manually doing it in CSS which kinda defeats the purpose, I know it's a small thing and it may be the point where I should just do it in CSS but, there must be a way!

SCSS:

.box-shadow {
  box-shadow: $box-shadow;
  &--light {
    box-shadow: $box-shadow--light;
  }
  &--strong {
    box-shadow: $box-shadow--strong;
  }
  &__spread {
    box-shadow: $box-shadow__spread;
    &--light {
      box-shadow: $box-shadow__spread--light;
    }
    &--strong {
      box-shadow: $box-shadow__spread--strong;
    }
  }
  &__concise {
    box-shadow: $box-shadow__concise;
    &--light {
      box-shadow: $box-shadow__concise--light;
    }
    &--strong {
      box-shadow: $box-shadow__concise--strong;
    }
  }
}

.card-box-shadow {
  & .pagebuilder-column {
    box-shadow: $box-shadow;
  }

  &--light {
    & .pagebuilder-column {
      box-shadow: $box-shadow--light;
    }
  }
  &--strong {
    & .pagebuilder-column {
      box-shadow: $box-shadow--strong;
    }
  }
  &__spread {
    & .pagebuilder-column {
      box-shadow: $box-shadow__spread;
    }

    &--light {
      & .pagebuilder-column {
        box-shadow: $box-shadow__spread--light;
      }
    }
    &--strong {
      & .pagebuilder-column {
        box-shadow: $box-shadow__spread--strong;
      }
    }
  }
  &__concise {
    & .pagebuilder-column {
      box-shadow: $box-shadow__concise;
    }

    &--light {
      & .pagebuilder-column {
        box-shadow: $box-shadow__concise--light;
      }
    }
    &--strong {
      & .pagebuilder-column {
        box-shadow: $box-shadow__concise--strong;
      }
    }
  }
}

Current output:

.box-shadow {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.box-shadow--light {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 4px;
}
.box-shadow--strong {
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 4px 8px 4px;
}
.box-shadow__spread {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 28px 6px, rgba(0, 0, 0, 0.1) 0px 2px 4px 1px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
}
.box-shadow__spread--light {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 6px;
}
.box-shadow__spread--strong {
  box-shadow: rgba(0, 0, 0, 0.56) 0px 15px 50px 6px;
}
.box-shadow__concise {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.box-shadow__concise--light {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.box-shadow__concise--strong {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px 3px, rgba(0, 0, 0, 0.23) 0px 3px 6px 3px;
}

.card-box-shadow .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.card-box-shadow--light .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 4px;
}
.card-box-shadow--strong .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 4px 8px 4px;
}
.card-box-shadow__spread .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 28px 6px, rgba(0, 0, 0, 0.1) 0px 2px 4px 1px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
}
.card-box-shadow__spread--light .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 6px;
}
.card-box-shadow__spread--strong .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.56) 0px 15px 50px 6px;
}
.card-box-shadow__concise .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.card-box-shadow__concise--light .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.card-box-shadow__concise--strong .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px 3px, rgba(0, 0, 0, 0.23) 0px 3px 6px 3px;
}

/*# sourceMappingURL=box-shadow.css.map */

Desired output:

.box-shadow,
.card-box-shadow .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.box-shadow--light,
.card-box-shadow--light .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 4px;
}
.box-shadow__concise,
.card-box-shadow__concise .pagebuilder-column {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.box-shadow__concise--light,
.card-box-shadow__concise--light .pagebuilder-column {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

So far this is the only way to make it output the same, is there a way of using a mixin to avoid this?

.box-shadow, .card-box-shadow .pagebuilder-column {
  box-shadow: $box-shadow;
}  
.box-shadow--light, .card-box-shadow--light .pagebuilder-column {
  box-shadow: $box-shadow--light;
}
.box-shadow--strong, .card-box-shadow--strong .pagebuilder-column {
  box-shadow: $box-shadow--strong;
}
.box-shadow__spread, .card-box-shadow__spread .pagebuilder-column {
  box-shadow: $box-shadow__spread;
}
.box-shadow__spread--light, .card-box-shadow__spread--light .pagebuilder-column {
  box-shadow: $box-shadow__spread--light;
}
.box-shadow__spread--strong, .card-box-shadow__spread--strong .pagebuilder-column {
  box-shadow: $box-shadow__spread--strong;
}
.box-shadow__concise, .card-box-shadow__concise .pagebuilder-column {
  box-shadow: $box-shadow__concise;
}
.box-shadow__concise--light, .card-box-shadow__concise--light .pagebuilder-column {
  box-shadow: $box-shadow__concise--light;
}
.box-shadow__concise--strong, .card-box-shadow__concise--strong .pagebuilder-column {
  box-shadow: $box-shadow__concise--strong;
}

score 0 · Answer 1 · answered Oct 20 '22 at 00:07

After some trial and error this is what I went for:

//this is in the mixin file

@mixin box-shadow-color($color, $add-class: false, $name) {
  $shadow-color: $color;

  $box-shadow: set-box-shadow-color($shadow-color, 0.35) 0px 5px 15px;
  $box-shadow--strong: set-box-shadow-color($shadow-color, 0.19) 0px 10px 20px,
  set-box-shadow-color($shadow-color, 0.23) 0px 4px 8px 4px;
  $box-shadow--light: set-box-shadow-color($shadow-color, 0.1) 0px 4px 12px 4px;
  $box-shadow__concise--light: set-box-shadow-color($shadow-color, 0.25) 0px 2px 5px -1px,
  set-box-shadow-color($shadow-color, 0.3) 0px 1px 3px -1px;
  $box-shadow__concise: set-box-shadow-color($shadow-color, 0.16) 0px 3px 6px,
  set-box-shadow-color($shadow-color, 0.23) 0px 3px 6px;
  $box-shadow__concise--strong: set-box-shadow-color($shadow-color, 0.16) 0px 3px 6px 3px,
  set-box-shadow-color($shadow-color, 0.23) 0px 3px 6px 3px;
  $box-shadow__spread: set-box-shadow-color($shadow-color, 0.2) 0px 8px 28px 6px,
  set-box-shadow-color($shadow-color, 0.1) 0px 2px 4px 1px,
  set-box-shadow-color($shadow-color, 0.05) 0px 0px 0px 1px inset;
  $box-shadow__spread--light: set-box-shadow-color($shadow-color, 0.15) 0px 5px 15px 6px;
  $box-shadow__spread--strong: set-box-shadow-color($shadow-color, 0.56) 0px 15px 50px 6px;

  @if $add-class {  
    .box-shadow--#{$name},
    .card-box-shadow .pagebuilder-column {
      box-shadow: $box-shadow;
    }
    .box-shadow--light--#{$name},
    .card-box-shadow--light--#{$name} .pagebuilder-column {
      box-shadow: $box-shadow--light;
    }
    .box-shadow--strong--#{$name},
    .card-box-shadow--strong--#{$name} .pagebuilder-column {
      box-shadow: $box-shadow--strong;
    }
    .box-shadow__spread--#{$name},
    .card-box-shadow__spread--#{$name} .pagebuilder-column {
      box-shadow: $box-shadow__spread;
    }
    .box-shadow__spread--light--#{$name},
    .card-box-shadow__spread--light--#{$name} .pagebuilder-column {
      box-shadow: $box-shadow__spread--light;
    }
    .box-shadow__spread--strong--#{$name},
    .card-box-shadow__spread--strong--#{$name} .pagebuilder-column {
      box-shadow: $box-shadow__spread--strong;
    }
    .box-shadow__concise--#{$name},
    .card-box-shadow__concise--#{$name} .pagebuilder-column {
      box-shadow: $box-shadow__concise;
    }
    .box-shadow__concise--light--#{$name},
    .card-box-shadow__concise--light--#{$name} .pagebuilder-column {
      box-shadow: $box-shadow__concise--light;
    }
    .box-shadow__concise--strong--#{$name},
    .card-box-shadow__concise--strong--#{$name} .pagebuilder-column {
      box-shadow: $box-shadow__concise--strong;
    }
  }
  @else {
    .box-shadow,
    .card-box-shadow .pagebuilder-column {
      box-shadow: $box-shadow;
    }
    .box-shadow--light,
    .card-box-shadow--light .pagebuilder-column {
      box-shadow: $box-shadow--light;
    }
    .box-shadow--strong,
    .card-box-shadow--strong .pagebuilder-column {
      box-shadow: $box-shadow--strong;
    }
    .box-shadow__spread,
    .card-box-shadow__spread .pagebuilder-column {
      box-shadow: $box-shadow__spread;
    }
    .box-shadow__spread--light,
    .card-box-shadow__spread--light .pagebuilder-column {
      box-shadow: $box-shadow__spread--light;
    }
    .box-shadow__spread--strong,
    .card-box-shadow__spread--strong .pagebuilder-column {
      box-shadow: $box-shadow__spread--strong;
    }
    .box-shadow__concise,
    .card-box-shadow__concise .pagebuilder-column {
      box-shadow: $box-shadow__concise;
    }
    .box-shadow__concise--light,
    .card-box-shadow__concise--light .pagebuilder-column {
      box-shadow: $box-shadow__concise--light;
    }
    .box-shadow__concise--strong,
    .card-box-shadow__concise--strong .pagebuilder-column {
      box-shadow: $box-shadow__concise--strong;
    }
  }
}

//box-shadow.scss file

@use "utilities" as *;

@include box-shadow-color($black, false, none);

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Oct 25 '22 at 01:10

SASS - Outputting to the same declaration?

1 Answers1

Linked