Last active
October 24, 2021 02:42
-
-
Save whizark/86751f1fbcd132ec8c52 to your computer and use it in GitHub Desktop.
Sass: placeholder-exists() in Sass #sass
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="warning"> | |
<p>A Warning Message.</p> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.warning { | |
color: red; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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