Estou desenvolvendo minhas classes CSS com SASS e percebi que utilizo muitas vezes Media Query
(@media) para criar comportamentos em determinada resolução.
%display-none-mobile{
@media (max-width:992px){
display: none;
}
}
.minha{
&-img{
&-agua{
width: 108px;
position: absolute;
left: calc(50% - 52vw);
@extend %display-none-mobile;
}
&-ipva{
position: absolute;
right: calc(100% - 98vw);
@extend %display-none-mobile;
}
}
&-col-left{
margin-top: 170px;
float: right;
@extend %display-none-mobile;
// mobile
@media (max-width:992px){
margin-top: 50px;
float: initial;
}
}
}
Usei Extends em alguns casos comuns no meu SASS, porem quando preciso de algo especifico na classe eu tenho que criar a media query novamente veja:
&-col-left{
margin-top: 170px;
float: right;
@extend %display-none-mobile;
// mobile
@media (max-width:992px){
margin-top: 50px;
float: initial;
}
}
Gostaria de saber se tem uma forma de incrementar esse extends, pensei como se fosse uma função, isso é possivel? ex: @extend%display-none-mobile(margin-top: 50px;,float: initial;) e o resultado seria:
%display-none-mobile{
@media (max-width:992px){
display: none;
margin-top: 50px;
float: initial;
}
}
Tem como fazer algo parecido com isso? se não como solucionar esse tipo de problema?