Skip to content

Instantly share code, notes, and snippets.

@whizark
Last active October 24, 2021 02:42
Show Gist options
  • Save whizark/86751f1fbcd132ec8c52 to your computer and use it in GitHub Desktop.
Save whizark/86751f1fbcd132ec8c52 to your computer and use it in GitHub Desktop.
Sass: placeholder-exists() in Sass #sass
<div class="warning">
<p>A Warning Message.</p>
</div>
// ----
// 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;
}
.warning {
color: red;
}
<div class="warning">
<p>A Warning Message.</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment