1

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?

1 Resposta 1

4

Isso é possivel usando @mixin com @content.

Por exemplo:

@mixin mobile {
  @media (max-width: 992px) {
    background: black;
    @content;
  }
}

.exemplo {
  @include mobile {
    color: white;
  }
}

Vai compilar:

@media (max-width: 992px) {
  .exemplo {
    background: black;
    color: white;
  }
}

Documentação

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .