Como usar los Mixins de Bootstrap 4 con SCSS

Cuando estas en un proyecto con Bootstrap 4 y estas usando SCSS, puedes hacer uso de los mixins prestablecidos por los mismos creadores de Bootstrap.

Por si no sabes como funcionan los mixins de SCSS, la idea es que puedes generar los mismos elementos que fueron creado por Bootstrap y poder crear tus propias clases con estos mixins.

Para usar los mixins de Bootstrap, tenemos que importar lo que se va a usar desde SCSS @import "~bootstrap" desde node_modules. Esto NO funciona si importas solo el CSS.

Yo prefiero usarlo modular, ya que importas lo que necesitas y no importas cosas que jamás usaras.

// Bootstrap ALL
// @import "~bootstrap";

// Bootstrap Core
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
// My variables
@import "variables";
// Bootstrap Mixins
@import "~bootstrap/scss/mixins";

// Bootstrap Modules
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/badge";
...

Lo importante es @include lo que hace es usar un @mixin, y al usarlos va generar todo lo necesario para crear el nuevo elemento.

Badges

Por ejemplo estoy trabajando en un proyecto que estamos haciendo uso de algunos elementos de Boostrap y uno de ellos son los badges y los estamos usando de esta manera:

.badge {
  ...
  &.badge-success {
    @include badge-variant($green-200);
    color: $green-600;
  }
  &.badge-warning {
    @include badge-variant($yellow-300);
    color: $yellow-600;
  }
  &.badge-danger {
    @include badge-variant($red-300);
    color: $red-600;
  }
}

Con esto podrán amoldar el elemento como ustedes lo necesiten. Sobre todo sobreescribiendo las clases por defecto de bootstrap, ya que si usas SCSS podrás importar solo lo que tu necesites y no todas las clases extras.

Buttons

Para los butones también cambiamos las variantes y agregamos un buton más pequeño:

.btn-xs {
	@include button-size(5px, 8px, 12px, 1, 4px)
}

.btn-primary {
  @include button-variant(
    $primary,
    $primary,
    darken($primary, 7.5%),
    darken($primary, 10%),
    darken($primary, 10%),
    darken($primary, 12.5%)
  );
  color: $white;
  &:hover,
  &:focus,
  &:active,
  &.active {
    color: $white !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }
}
...

De esta manera agregamos un boton más pequeño con la etiqueta .btn-xs y cambiamos todo de .btn-primary.

Media Query Mixins

Un mixin sumamente útil para mi es los mixins de media query, con esto puedes controlar las media queries que configuraste para Bootstrap o las de base que trae Bootstrap.

Min width

.sidebar {
  ...
  @include media-breakpoint-up(md) {
    display: block;
    background: green;
  }
}

// Compila
//   @media (min-width: 544px) {
//     ,sidebar {
//         display: none;
//     }
// }

Max width

.sidebar {
  ...
  @include media-breakpoint-down(sm) {
    display: none;
  }
}

// Compila
//  @media (min-width: 576px) and (max-width: 768px) {
//     ,sidebar {
//         display: none;
//     }
// }

Min and Max width

.sidebar {
    ...
    @include media-breakpoint-between(sm, md) {
      background: red;
    }
}

// Compila
// @media (min-width: 576px) and (max-width: 992px) {
//     .sidebar {
//          background: red;
//     }
// }

Cheat Sheet

Aquí podrán encontrar la mayoría de los mixins que se han creado en Bootstrap 4:

Bootstrap 4 SASS Mixins Cheat Sheet