.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들,이 믹스 인이라고 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의 벤더 프리픽스 등에 특히 것들을 기억하는 지름길이다. 위의 CSS 출력은 다음과 같습니다.

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