Mixins

SCSS mixins are a powerful feature that allows developers to create reusable blocks of CSS code. They are similar to functions in programming, as they accept arguments and generate CSS styles based on those arguments. Mixins provide a way to encapsulate common styles or complex CSS patterns, making the code more modular, maintainable, and efficient.

How do we use Them

To define a mixin in SCSS, you use the @mixin directive, followed by the mixin name and its parameter list. Within the mixin block, you can write CSS rules and use the provided parameters to generate dynamic styles.

When creating mixins, we must always keep in mind that, being reusable pieces, they should not generate redundancies or unnecessary code.

Here’s an example of a simple SCSS mixin that sets the font properties based on the provided arguments:

@mixin make-col($i) {
  $value: 0.6944444444444% * ($columns * $i);
  flex: 0 0 $value;
  max-width: $value;
}

NOTE!

Mixins always start with make-{something}

Once defined, you can include the mixin in any selector using the @include directive, and pass the desired values as arguments:

.c--card-a {
  @include make-col(6);
}

In this example, the mixin “make-card” would set the card element to occupy a width of 6 columns across all breakpoints.

Mixins Components & Foundation

Our design system is built on foundations and components. Here is a list of some commonly used global components, along with a variety of mixins that are useful for extensions.

NOTE!

It is possible for each project to have different mixins depending on the version in which the project was developed. Right now Sections are only necessary on projects without flexible modules

Mixins for Foundations:

• Aspect-ratio - make-ar()
• Font - make-font-a()
• Gap - make-gap-a()
• Grid
  • Container - make-container()
  • Row make-row()
  • Columns make-col()
    • Offset make-offset()
    • Order make-order()
• Section make-section-a()
• Spages make-sp-a()

Mixins for Components

Since the implementation of global components for project development, we are no longer using component mixins. The vast majority of components come ‘pre-built,’ and when it’s necessary to create a custom one, we do it ad hoc from components.

If such a case arises and it’s detected that the same code needs to be applied repeatedly, it would be a good idea to create a mixin for it.