Как вставить свойства одного класса в другой (SASS)?

Question

[Антон Шаманов]

Допустим есть классы

.font-bold {font-weight: bold;}
.my-text {color: #000;}

Как передать свойства .font-bold в .my-text? Т.е. чтобы получилось:

.font-bold {font-weight: bold;}
.my-text {color: #000; font-weight: bold;}

.my-text {
  color: #000;
  @extend .font-bold;
}

этого сделать не позволяет, если только не заменить .font-bold на %font-bold, но тогда придется добавлять

.font-bold {
  @extend %font-bold;
}

а у меня стилей таких очень много чтобы вручную всё перелопатить.

Есть ли какое-то стандартное решение данной проблемы?

Comments

[Сергей delphinpro]

.my-text {
  color: #000;
  @extend .font-bold;
}

Это как раз-таки и решает вашу задачу.
на выходе будет

.font-bold, .my-text {font-weight: bold;}
.my-text {color: #000;}

что в конечном итоге равносильно

.font-bold {font-weight: bold;}
.my-text {color: #000; font-weight: bold;}

[Антон Шаманов]

Сергей, это понятно, я рассчитывал на лайвхак какой-нибудь не очевидный который бы позволял сгруппировать свойства - подобный код будет весить дохрена(

[Сергей delphinpro]

Антон Шаманов, вообще-то экстенд обычно уменьшает количество кода на выходе. Даже на вашем примере это видно.

[Антон Шаманов]

Сергей, дело говорите, туплю уже. оставлю тогда как есть с @extend'ами

Answer 1

[Антон Шаманов]

Сергей @dpr

.my-text {
color: #000;
@extend .font-bold;
}

Это как раз-таки и решает вашу задачу.
на выходе будет

.font-bold, .my-text {font-weight: bold;}
.my-text {color: #000;}

что в конечном итоге равносильно

.font-bold {font-weight: bold;}
.my-text {color: #000; font-weight: bold;}

Comments

[Anton Filippov]

лол, по ссылкам то же самое скинул и пару раз прописал сам

учимся читать, товарищ)