Как добавить еще один Transform?

Question

[Anonymous Penguin]

Использую Scss. У одного класса у меня уже есть свойство Transform. По почти такому же, но модифицированному, мне нужно добавить дополнительные трансформации в него. Как это сделать, не используя повторения?

<div class="block1">
  <div class="block1__elem block2 block2--mod">
    ...
  </div>
</div>

.block1 {
  &__elem {
    transform: scale(1.1);
  }
}
.block2 {
  &--mod {
    transform: rotate(90deg); //заменяет, а мне нужно использовать вместе с прошлым
  }
}

Answer 1

[Ankhena]

transform: scale(1.1) rotate(90deg);

Можете старое записывать в кастомное свойство. Тогда оно автоматом поменяется всюду.

.item {
  --transform: scale(1.1);
  transform: var(--transform);
  
  &--mod {
    transform: var(--transform) rotate(90deg);
  }
}

Comments

[Anonymous Penguin]

Как это сделать, не используя повторения?

Потому что одно из значений свойства transform может измениться

[Ankhena]

Anonymous Penguin,
Можете старое записывать в кастомное свойство. Тогда оно автоматом поменяется всюду.

.item {
  --transform: scale(1.1);
  transform: var(--transform);
  
  &--mod {
    transform: var(--transform) rotate(90deg);
  }
}

[Anonymous Penguin]

Ankhena, да-да, я тут)) Я немного отложил эту задачу, сейчас акцент не на этом.