.selector {
  margin: 0 rem(6);
  padding: rem(12) rem(24);
  font-size: 0.98rem;
  color: #eee;
  background-image: url("/path/to/image");

  &::before {
    content: "✌";
    background: $color-black;
  }

  &[type="text"] {
    font-size: 1rem;
  }
}

.selector-1,
.selector-2 {
  display: block;
  padding: rem($spacing-base);
  color: $color-text-base;
  background-color: $color-brand;
  background-image:
    linear-gradient($color-white, $color-grey-mercury),
    linear-gradient($color-black, $color-grey-alabaster);
  box-shadow:
    1px 1px 1px $color-black,
    2px 2px 1px 1px $color-grey-mercury inset;
}
%block {
  display: block;
}

.selector3 {
  @extend %block;
  @include u-text-truncate;

  padding: $padding-setting;
  color: #eee;
  background-color: rgb(0 0 0 / 50%);

  &.selector--modifier {
    font-size: 1rem;
  }

  .parent-selector & {
    font-size: 1.25rem;
  }

  .nested__selector .nested__selector {
    font-size: 1.5rem;
  }

  @media only screen and (width >= 768px) {
    color: #fed;
    background-color: rgb(0 0 0 / 20%);
  }
}

@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}