Jakie jest znaczenie "@include" w plikach .css?

Question

Nie rozumiem, jakie jest znaczenie tagu @include w plikach .css. Na przykład:

.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 są częścią SCSS, nazywa Mixin. Oto przykład:

@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 to skrót do przechowywania rzeczy, jak zwłaszcza prefiksy dostawców. Wyjście CSS powyższego będzie:

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