scss 模块mixin - ukázkamodulovéhopřístupu

Posted 2021-05-18

// _mixins.scss
@mixin module($color: grey, $duration: 0s, $border: null) {
  color: $color;
  transition: $duration;
  border: $border;
}
 
// _component.scss
.element {
  @include module((
    duration: .15s,
    color: pink
  )...);
}


// _mixins.scss
@mixin module2($options: ()) {
  $configuration: map-merge((
    color: grey,
    duration: 0s,
    border: null
  ), $options);
 
  color: map-get($configuration, color);
  transition: map-get($configuration, duration);
  border: map-get($configuration, border);
}
 
// _component.scss
.element {
  @include module2((
    color: pink,
    duration: .15s
  ));
}


// http://www.sitepoint.com/using-sass-maps/