.cssファイルの "@include"の意味は何ですか？

Question

.cssファイルの@includeタグの意味は何ですか？例については ：

.wrapper { 
display: flex; 
width: 100%; 
@include display(flex); 
@include flex-direction(column); 
@include align-items(center); 
@include justify-content(center); 
@include transition(all 2s linear); 
} 

Answer 1

@include sがSCSSの一部であり、それがミックスインと呼ばれています。ここでは例がある：

@mixin border-radius($radius) { 
    -webkit-border-radius: $radius; 
     -moz-border-radius: $radius; 
     -ms-border-radius: $radius; 
      border-radius: $radius; 
} 

.box { @include border-radius(10px); } 

@include sが特にベンダープレフィックスのようなものを格納するためのショートカットです。上記のCSS出力は次のようになります：

.box { 
    -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
     -ms-border-radius: 10px; 
      border-radius: 10px; 
}