Is it possible to do Functions with SASS?

0

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?

    
asked by anonymous 22.11.2018 / 21:13

0 answers