html Sass：占位符 - 存在（）在Sass #sass中

Posted 2021-05-11

<div class="warning">
  <p>A Warning Message.</p>
</div>

.warning {
  color: red;
}

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

// Sass: placeholder-exists() in Sass.
//
// Automatically placeholder-ize duplicated CSS declarations.
// https://gist.github.com/whizark/720ffec139368fa61932
//
// Other ideas
// https://github.com/whizark/xass#ideas 

// List for Placeholder names.
$-placeholders: ();

// Returns whether a placeholder exists.
//
// Note: This cannot check nested (scoped) placeholders.
@function placeholder-exists($name) {
  @if index($-placeholders, $name) == null {
    @return false;
  }

  @return true;
}

// Registers a placeholder.
//
// @access private
@function -register-placeholder($name) {
  @if placeholder-exists($name) {
    @error 'The key `#{$name}` has already been registered.';
  }

  $-placeholders: append($-placeholders, $name) !global;

  @return $name;
}

// Defines a placeholder.
@mixin define-placeholder($name) {
  %#{$name} {
    $name: -register-placeholder($name);

    @content;
  }
}

// Defines my own placeholder(s).
%important {}    // A stub for IDE.
@include define-placeholder('important') {
  color: red;
}

// Extends placeholder.
.warning {
  @extend %important;
}

<div class="warning">
  <p>A Warning Message.</p>
</div>