html Sass：将属性值传递到/在mixins / functions #sass内部

Posted 2021-05-11

<a class="button">An example link</a>
<a class="button--ghost">An example link</a>

.button {
  display: inline-block;
  padding: .25em;
  color: #fff;
  background: #f00;
  font-weight: bold;
}

.button--ghost {
  display: inline-block;
  padding: .25em;
  color: #f00;
  background: transparent;
  border: 2px solid #f00;
  font-weight: bold;
}

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----

// Sass: Passing/Getting property value(s) to/in mixins/functions

// Property dumper mixin
@mixin properties($properties) {
  @each $property, $value in $properties {
    @if str-index($property, '-my-') != 1 {
      #{$property}: $value;
    }
  }
}

// Component mixins
// Button base mixin
@mixin my-button--base($propeties: ()) {
  display: inline-block;
  padding: .25em;
}

// Default button mixin
@mixin my-button--default($properties: ()) {
  $defaults: (
    -my-color: null
  );

  $properties: map-merge($defaults, $properties);
  $color     : map-get($properties, '-my-color');

  // CSS Variables
  // --color   : $color;
  color     : #fff;
  background: $color;
}

// Ghost button mixin
@mixin my-button--ghost($properties: ()) {
  $defaults: (
    -my-color: null
  );

  $properties  : map-merge($defaults, $properties);
  $color       : map-get($properties, '-my-color');
  $font-weight : normal;
  $border-width: 1px;

  // Get CSS font-weight value
  @if map-has-key($properties, 'font-weight') {
    $font-weight: map-get($properties, 'font-weight');
  }

  @if $font-weight == 'bold' {
      $border-width: 2px;
  }

  // CSS Variables
  // --color   : $color;
  color     : $color;
  background: transparent;
  border    : $border-width solid $color;
}

// Component mixin (API)
@mixin my-button($properties: ()) {
  $defaults: (
    -my-type: 'default'
  );

  $properties: map-merge($defaults, $properties);
  $type      : map-get($properties, '-my-type');

  @include my-button--base($properties);

  @if $type == 'ghost' {
    @include my-button--ghost($properties);
  } @else {
    @include my-button--default($properties);
  }
}

// Component definitions
// Default button component
%my-button {
  $properties: (
    -my-color  : #f00,
    font-weight: bold
  );

  @include my-button($properties);
  @include properties($properties);
}

// Ghost button component
%my-button--ghost {
  $properties: (
    -my-type   : ghost,
    -my-color  : #f00,
    font-weight: bold
  );

  @include my-button($properties);
  @include properties($properties);
}

// Mapping components to concrete classes
.button {
  @extend %my-button;
}

.button--ghost {
  @extend %my-button--ghost;
}

<a class="button">An example link</a>
<a class="button--ghost">An example link</a>