html Sass：多态占位符和mixins #sass

Posted 2021-05-11

<a class="button" href="#">&lt;a&gt; button</a>
<button class="button">&lt;button&gt; button</button>

a.button, button.button {
  display: inline-block;
  padding: .5em;
  color: #fff;
  background: #f00;
  font-size: 1rem;
}

a.button {
  text-align: center;
  text-decoration: none;
}

button.button {
  border: 0;
}

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

// Polymorphic placeholders & mixins

// Mixins: you may directly use these mixins.
// Button base (or generic button) mixin
@mixin button--base($parameters: ()) {
  display: inline-block;
  padding: .5em;
  color: #fff;
  background: #f00;
  font-size: 1rem;
}

// Button mixin for <a>
@mixin button--a($parameters: ()) {
  text-align: center;
  text-decoration: none;
}

// Button mixin for <button>
@mixin button--button($parameters: ()) {
  border: 0;
}

// Button mixin (API)
@mixin button($parameters: ()) {
  $defaults  : (
    type: null
  );
  $parameters: map-merge($defaults, $parameters);
  $type      : map-get($parameters, "type");
  
  @if ($type == "a") {
    // <a> button
    @include button--a($parameters);
  } @else if ($type == "button") {
    // <button> button
    @include button--button($parameters);
  } @else {
    // Button base
    @include button--base($parameters);
  }
}

// Placeholders: you should separate your component(s) from concrete selector(s)
// Generic button
%button {
  $parameters: ();
  
  @include button($parameters);
}

// <a> button
a%button {
  // @todo try to find better way...
  //       for exmple, using selector functions?
  //       parsing/replacing selector?
  // $type: selector-replace(&, "%button", "a");
  
  $type      : "a";
  $parameters: (
    type: $type
  );
  
  @include button($parameters);
}

// <button> button
button%button {
  // @todo try to find better way...
  //       for exmple, using selector functions?
  //       parsing/replacing selector?
  // $type: selector-replace(&, "%button", "a");
  
  $type      : "button";
  $parameters: (
    type: $type
  );
  
  @include button($parameters);
}

// Mapping placeholders to concrete selectors
a.button {
  @extend %button;
}

button.button {
  @extend %button;
}

<a class="button" href="#">&lt;a&gt; button</a>
<button class="button">&lt;button&gt; button</button>