No CSS, muitas vezes eu gosto de utilizar algumas "classes modificadoras" para estender funcionalidades.
Exemplo:
.btn{
background-color: red;
height: 50px;
}
.btn.btn-outlined{
background-color: transparent;
color: red;
}
Eu tenho uma dúvida quanto a propriedade transform
. As vezes coloco algumas coisas lá, para normalizar a centralização do elemento, por exemplo. Porém ao usar uma outra classe para modificar a principal, sempre acabo tendo que redeclarar tudo de novo.
Exemplo:
.principal{
transform: rotateX(25deg) translateX(-50%) scale(1.2);
}
No caso acima, se eu quisesse adicionar algo a mais no transform
, por exemplo, um skew
, eu não poderia fazer isso, sem ter que praticamente copiar a linha inteira.
Eu gostaria de saber se existe uma solução menos repetitiva no CSS sobre essa situação do transform
.
Algumas propriedades costumam ter longas declarações, como font
e background
. Alguém poderia declarar um font: 12px arial bold
. Porém a maioria delas possui modificadores como background-color
, background-size
, background-repeat
, font-size
ou font-weight
que facilitam trocar uma parte da propriedade.
Queria saber se existe alguma coisa assim para transform
.