html Sass：Mixin #sass中基于元素类型的条件样式

Posted 2021-05-11

<a class="button">A</a>
<button class="button">button</button>
<a class="button-2">A</a>
<button class="button-2">button</button>

button.button {
  margin: 1em;
  padding: 1em;
  background: red;
  color: white;
  font-weight: bold;
}
button.button {
  display: inline-block;
}
button.button {
  border: 0;
}

a.button {
  margin: 1em;
  padding: 1em;
  background: red;
  color: white;
  font-weight: bold;
}
a.button {
  display: inline-block;
}
a.button {
  text-decoration: none;
}

button.button-2,
a.button-2 {
  margin: 1em;
  padding: 1em;
  background: blue;
  color: white;
  font-weight: bold;
}
button.button-2 {
  display: inline-block;
}
a.button-2 {
  display: inline-block;
}
a.button-2 {
  text-decoration: none;
}
button.button-2 {
  border: 0;
}

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

// Sass: Element-type-based conditional styles inside Mixin
//
// Other ideas
// https://github.com/whizark/xass#ideas

// Element-type-based conditional mixin.
@mixin type($type, $selectors: null) {
  $selectors: if($selectors != null, $selectors, &);

  @each $selector in $selectors {
    @if is-superselector($type, $selector) {
      @at-root #{$selector} {
        @content;
      }
    }
  }
}

// Use case.
// Component Mixin.
@mixin button($color) {
  // Universal style.
  margin: 1em;
  padding: 1em;
  background: $color;
  color: white;
  font-weight: bold;

  // Style for button & a element.
  @include type((button, a)) {
    // Using mixin & placeholder-ize is more better way.
    //
    // Sass: Placeholder-ize duplicated CSS declarations
    // https://gist.github.com/whizark/720ffec139368fa61932
    display: inline-block;
  }

  // Style for a element.
  @include type(a) {
    // Using mixin & placeholder-ize is more better way.
    //
    // Sass: Placeholder-ize duplicated CSS declarations
    // https://gist.github.com/whizark/720ffec139368fa61932
    text-decoration: none;
  }

  // Style for button element.
  @include type(button) {
    // Using mixin & placeholder-ize is more better way.
    //
    // Sass: Placeholder-ize duplicated CSS declarations
    // https://gist.github.com/whizark/720ffec139368fa61932
    border: 0;
  }
}

// Concreate classes.
button.button {
  @include button(red);
}

a.button {
  @include button(red);
}

button.button-2,
a.button-2 {
  @include button(blue);
}

<a class="button">A</a>
<button class="button">button</button>
<a class="button-2">A</a>
<button class="button-2">button</button>