SCSS генерирует префикс для класса

Question

Я хочу иметь возможность генерировать .pre-class и .sub-class для любого .class.

например. .title, .pre-title и .sub-title или .heading, .pre-heading, .sub-heading

Я могу сделать это, передав переменную класса (пример ниже), есть ли какой-нибудь более чистый / простой способ получить префиксы для класса?

$className: heading;
.section {
  .#{$className} {
    color: pink;
  }
  .sub-#{$className} {
    color: red;
  }
  .pre-#{$className} {
    color: green;
  }
}

Answer 1

Вы можете использовать суффиксы вместо префиксов. Это короче, но менее актуально.

$className: heading;

.section .#{$className} {
  color: pink;

  &-sub {
    color: red;
  }

  &-pre {
    color: green;
  }
}

Answer 2

[class^="sub-"] — starts with "status-" (obviously).

[class*=" sub-"] — contains the substring "status-" occurring directly after a space character. Class names are separated by whitespace per the HTML spec, hence the significant space character. This checks any other classes after the first if multiple classes are specified, and adds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that output class attributes dynamically).

Хотя лучший способ и моя рекомендация уменьшить код / ​​очистку - это то, что вы упоминаете. Определенно.

Префикс SCSS здесь