Academy / Advanced Level: HTML and CSS

CSS Preprocessors: SASS/SCSS

Mixins for Reusable Code Blocks

Mixins in SASS/SCSS are blocks of reusable styles that can be included in multiple selectors. This is particularly useful for avoiding repetition and can include dynamic arguments to make the mixins more flexible.

Example of a Mixin:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(10px); /* Applying the mixin with a 10px radius */
}

In this example:

• The @mixin directive defines a mixin named border-radius, which accepts a parameter $radius.
• The mixin is then included in the .button class using the @include directive, passing in a radius of 10px.