Is it possible to do Functions with SASS?

Question

I am developing my CSS classes with SASS and I realized that I use many times Media Query (@media) to create behaviors in a certain 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 wonder if you have a way to increase this extends, I thought as if it were a function, is that 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 you can’t solve this kind of problem?

Answer 1

This is possible using @mixin with @content.

For example:

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

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

Will compile:

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

Documentation