sass @includeは別の方法で動作しています

Question

下記のようにCSSを生成しているWebアプリケーションの1つでこのコードを見つけました。このインクルードがどのように動作しているのか分かりませんが、私はいくつかのコードで{}を見ることができた。

SASSコード

.sendfile-header-title { 

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

    } 

CSSはあなたがミックスインを呼び出すために@includeを使用してコード

@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

を生成。

私はコード例を使用してプロセスを説明してみましょう：たくさんお世話になった

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