CODEWITHSUNDEEP
csssasslesscompass-sassscss-lint
shaik
shaik

Reputation: 35

sass @include is working in different way

I found this below code in one of web application, which is generating the css as mentioned below Not able to understand what way this include is working as per as I aware include is kind of function calling But I could able to see {} with some code inside.

sass code

   .sendfile-header-title {

      @include viewport(small) {
        text-align: center;
        display: block;
        border-bottom: solid 1px $secondary-gray;
        background: red;
      }

    }

css generated code 

  @media only screen and (max-width: 735px) and (max-device-width:768px) {
        .sendfile-header-title {
            text-align:center;
            display: block;
            border-bottom: solid 1px #e0e0e0;
            background: red;
        }
    }

Upvotes: 0

Views: 70

Answers (1)

Reynolds
Reynolds

Reputation: 181

You use @include to call a mixin.

Let me explain the process with a code example:

//This way you define a mixin
@mixin viewport($breakpoint) {
    @if $breakpoint == small {
        @media only screen and (max-width: 735px) and (max-device-width:768px) {
            @content;
        }
    }
    @else ...
}



//This way you use a mixin
.sendfile-header-title {

    @include viewport(small) {
        //code ritten here will replace the @content inside the mixin
        //so the output in the css file will be a @media query applied to this element with the following code inside

        text-align: center;
        display: block;
        border-bottom: solid 1px $secondary-gray;
        background: red;
    }

}


//The css output will be:

//the @media query
@media only screen and (max-width: 735px) and (max-device-width:768px) { 
    //the element
    .sendfile-header-title {
        //the code
        text-align:center;
        display: block;
        border-bottom: solid 1px #e0e0e0;
        background: red;
    }
}

Upvotes: 2

Related Questions