I'm developing my CSS classes with SASS and realized that I often use Media Query
(@media) to create behaviors at a given resolution.
%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;
}
}
}
I used Extends in some common cases in my SASS, but when I need something specific in the class I have to create the media query again see:
&-col-left{
margin-top: 170px;
float: right;
@extend %display-none-mobile;
// mobile
@media (max-width:992px){
margin-top: 50px;
float: initial;
}
}
I would like to know if there is a way to increment this extension, I thought it was a function, is it possible? ex: @ extend-display-none-mobile (margin-top: 50px ;, float: initial;) and the result would be:
%display-none-mobile{
@media (max-width:992px){
display: none;
margin-top: 50px;
float: initial;
}
}
Can you do something like this? if not how to solve this type of problem?