scss mixin的example.scss

Posted 2021-05-18

/* mixin without parameter */
@mixin pull-left {
  float: left;
}

.pull-left {
  @include pull-left;
}

// mixin with parameters
// oh, code style comment :))
// ignore by builder
@mixin border($color: #000, $thickness: 1px) {
  border: $thickness solid $color;
}

.border-black {
  @include border;
}

.border-red {
  @include border(red);
}

.border-red--lg {
  @include border(red, 2px);
}