css - sass @include 以不同的方式工作

Question

我在一个 Web 应用程序中发现了下面的代码，它正在生成如下所述的 css里面的代码。

萨斯代码

   .sendfile-header-title {

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

    }

css 生成的代码

  @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;
        }
    }

Answer 1

您使用 @include 来调用 mixin。

让我用一个代码示例来解释这个过程：

//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;
    }
}