Skip to content

Instantly share code, notes, and snippets.

@graste
Forked from KittyGiraudel/SassMeister-input.scss
Created May 11, 2014 17:11
Show Gist options
  • Save graste/a9e52a4820fa32efd1d6 to your computer and use it in GitHub Desktop.
Save graste/a9e52a4820fa32efd1d6 to your computer and use it in GitHub Desktop.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// Here is a map containing all placeholders
// (Follow-up from: http://hugogiraudel.com/2014/03/31/getting-the-most-out-of-sass-placeholders/)
// ---
// - The key is the placeholder's name
// - The value is a map of declarations for the placeholder's content
// ---
// Main problem I can see with this technic is
// it makes it impossible to use nesting,
// including `&`
// ---
// Example:
// %clearfix {
// overflow: hidden;
// }
// ... becomes:
// clearfix: (
// overflow: hidden
// )
$extend-map: (
clearfix: (
overflow: hidden
),
border-box: (
box-sizing: border-box
),
hide-text: (
overflow: hidden,
text-indent: 100%,
white-space: nowrap
)
);
// Extend mixin
// Dealing with the extension for you
// ---
// @param [string] $class: name of the placeholder to @extend
// @param [bool] $extend (true): @extend or @include?
@mixin extend($placeholder, $extend: true) {
// Getting placeholder's content
$content: map-get($extend-map, $placeholder);
// If the key doesn't exist in map,
// Do nothing and warn the user
@if $content == null {
@warn "`#{$class}` doesn't exist in $extend-map.";
}
// If $extend is set to true (most cases)
// Extend the placeholder
@else if $extend == true {
@extend %#{$placeholder};
}
// If $extend is set to false
// Include placeholder's content directly
@else {
@each $property, $value in $content {
#{$property}: $value;
}
}
}
// Looping through the placeholders' map
// Instanciating a placeholder everytime
// With $extend set to false so it dumps
// mixin's core in the placeholder's content
@each $placeholder, $content in $extend-map {
%#{$placeholder} {
@include extend($placeholder, $extend: false);
}
}
// Examples and demos
.clear {
@include extend(clearfix);
}
@media (min-width: 100px) {
.clear-in-mq {
@include extend(clearfix, false);
}
}
.hide-text {
@include extend(hide-text);
}
.hide-text {
@include extend(hide-text);
}
@media (min-width: 100px) {
.hide-text-in-mq {
@include extend(hide-text, false);
}
}
.clear {
overflow: hidden;
}
.hide-text {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
@media (min-width: 100px) {
.clear-in-mq {
overflow: hidden;
}
}
@media (min-width: 100px) {
.hide-text-in-mq {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment