CODEWITHSUNDEEP
csssass
daniel nasiri
daniel nasiri

Reputation: 495

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

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

Upvotes: 25

Views: 31420

Answers (2)

Muhammad Ibrahim
Muhammad Ibrahim

Reputation: 71

Just like you have reusable function in JavaScript, maxins allow you to have reuseable css declarations in a .scss file. more about scss here. The @include tells scss to use the declaration provided. Here is an example below.

SCSS CODE

enter image description here

CSS output

enter image description here

Upvotes: 0

jkemming
jkemming

Reputation: 742

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

Upvotes: 40

Related Questions