What does @include do in SASS?

Question

I'm new in SASS and programming language.

.row 
{
  @include make-row;
}

In the above @include, is it equal to @import function in sass? Can you explain the functionality of @include.

Answer 1

@import imports a whole file, @include includes a @mixin piece of code. It allows you to create reusable code.

@mixin example($color, $style, $weight) {
  border: $color, $style, $weight;
  width: 100px;
  height: 100px
  padding: 10px;
}

.box { 
  @include example(#000, solid, 1px); 
}

Answer 2

In SASS @include is related to mixins, don't mistake this for @import as they do two completely different things.

@mixin blue-text {
    color: blue;
}
span {
    @include blue-text;
}

You will end up with:

span {
    color: blue;
}