What is the meaning of the "@include" in .css Files?

Question

I don't understand , what is the meaning of the @include tag in .css files. For Example :

.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

@includes are a part of SCSS, it's called Mixin. Here is an example:

@mixin border-radius($radius) {     -webkit-border-radius: $radius;        -moz-border-radius: $radius;         -ms-border-radius: $radius;             border-radius: $radius; }  .box { @include border-radius(10px); } 

@includes are a shortcut to storing especially things like vendor prefixes. The CSS output of the above will be:

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