Categories
CSS Web development

Sass @mixin and @include

Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other. The @mixin directive lets you create CSS code that is to be reused throughout the website. The @include directive is created to let you use (include) the mixin.

Web developer
Do you like this gif? Check more gifs in theĀ store.

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.

A mixin is defined with the @mixin directive:

Sass @mixin Syntax:

@mixin name {
  property: value;
  property: value;
  ...
}

The following example creates a mixin named “important-text”:

SCSS Syntax:

@mixin important-text {
  color: blue;
  font-size: 25px;
  font-weight: bold;
  border: 2px solid green;
}

The @include directive is used to include a mixin:

Sass @include mixin Syntax:

selector {
  @include mixin-name;
}

SCSS Syntax:

.read {
  @include important-text;
  background-color: pink;
}

Output:

A mixin can also include other mixins:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

Passing Variables to a Mixin

Mixins accept arguments. This way you can pass variables to a mixin.

Here is how to define a mixin with arguments:

@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(green, 2px);
}

.myNotes {
  @include bordered(blue, 2px);

Notice that the arguments are set as variables and then used as the values (color and width) of the border property.

Default Values for a Mixin

It is also possible to define default values for mixin variables:

SCSS Syntax:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

Then, you only need to specify the values that change when you include the mixin:

SCSS Syntax:

.myTips {
  @include bordered($color: orange);
}

Using a Mixin For Vendor Prefixes

Another good use of a mixin is for vendor prefixes.

SCSS Syntax:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

After compilation, the CSS will look like this:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

Enjoy coding!

Leave a Reply