Хранить классы в расширениях с SASS

Question

Давайте посмотрим, у нас есть 2 коробки.Нам нужна фиолетовая рамка для одного с шириной 1px, а для другого - красная граница с шириной 2px, но только если она отображается на планшете.

SCSS:

.brd {
  border-style: solid;
  &-thin {
    border-width: 1px;
    &-purple {
      border-color: purple;
    }
    &-red {
      border-color: red;
    }
  }
  &-thick {
    border-width: 2px;
    &-purple {
      border-color: purple;
    }
    &-red {
      border-color: red;
    }
  }
  &-from-tablet {
    @media only screen and (min-width: 768px) {
      &-thin {
        border-width: 1px;
        &-purple {
          border-color: purple;
        }
        &-red {
          border-color: red;
        }
      }
      &-thick {
        border-width: 2px;
        &-purple {
          border-color: purple;
        }
        &-red {
          border-color: red;
        }
      }
    }
  }
}

/*what I'd need*/

%colors {
  &-purple {
    border-color: purple;
  }
  &-red {
    border-color: red;
  }
}
%widths {
  &-thin {
    border-width: 1px;
    @extend %colors;
  }
  &-thick {
    border-width: 2px;
    @extend %colors;
  }
}
.brd {
  border-style: solid;
  @extend &widths;
  &-from-tablet {
    @media only screen and (min-width: 768px) {
      @extend &widths;
    }
  }
}

HTML:

<div class="brd-thin-purple"></div>
<div class="brd-from-tablet-thick-red"></div>

Но, к сожалению, это не работает.Идея состоит в том, чтобы создать запрос в классе, чтобы установить необходимые параметры.

Мне интересно, возможно ли хранить не только пары ключ-значение css в «переменной», но и классы?и расширения классов даже вложенные.

Есть идеи?

Answer 1

Вы не можете сделать это с SASS заполнителями .Они слишком ограничены.Вместо этого используйте mixins :

@mixin brd-color {
  &-purple {
    color: purple;
  }

  &-red {
    color: red;
  }
}

, а затем укажите его как: @include brd-color;