elseloop · February 27, 2015 20:29
diff --git a/SassMeister-input-HTML.html b/SassMeister-input-HTML.html
 <div class="thing"></div>

 <div class="other-thing"></div>

 <div class="thing-three"></div>
diff --git a/SassMeister-input.scss b/SassMeister-input.scss
 // ----
 // Sass (v3.4.12)
 // Compass (v1.0.3)
 // ----

 $icons: (
  one: "hey!",
  two: url(http://www.fillmurray.com/400/250),
  three: one
);

@function icon($icon, $iconMap: $icons) {
	// check $icon exists in $iconMap
	@if map-has-key($iconMap, $icon) {
		$icon: map-get($icons, $icon);

		// recursive call to check for self-referencing icon keys
		// i.e.: $icons: ( check: "\e007", tick: check )
		// @include icon(tick) will return check => "\e007" 
		@if map-has-key($icons, $icon) {
			$icon: icon($icon);
		}
	}
	@else {
		@warn "The icon you called -- #{$icon} -- is not in the #{$iconMap} icon map.";

		@return null;
	}

	@return $icon;
}

@mixin icon($name, $pseudo: before, $iconMap: $icons) {
	&:#{$pseudo} {
		content: icon($name, $iconMap);
		@content; // allows additional CSS declarations to be passed as well
	}
}

.thing {
  @include icon(one) {
    color: red;
    display: block;
    font-family: sans-serif;
    font-size: 2rem;
    margin-bottom: .5rem;
    text-transform: uppercase;
  };
}

.other-thing {
  &:after {
    content: icon(two);
  }
}

.thing-three {
  @include icon(three) {
    color: cornflowerblue;
    display: block;
    font-family: sans-serif;
    font-size: 2rem;
    margin-top: .5rem;
    text-transform: uppercase;
  };
}
diff --git a/SassMeister-output.css b/SassMeister-output.css
 .thing:before {
  content: "hey!";
  color: red;
  display: block;
  font-family: sans-serif;
  font-size: 2rem;
  margin-bottom: .5rem;
  text-transform: uppercase;
 }

 .other-thing:after {
  content: url(http://www.fillmurray.com/400/250);
 }

 .thing-three:before {
  content: "hey!";
  color: cornflowerblue;
  display: block;
  font-family: sans-serif;
  font-size: 2rem;
  margin-top: .5rem;
  text-transform: uppercase;
 }
diff --git a/SassMeister-rendered.html b/SassMeister-rendered.html
 <div class="thing"></div>

 <div class="other-thing"></div>

 <div class="thing-three"></div>
	<div class="thing"></div>

	<div class="other-thing"></div>

	<div class="thing-three"></div>
	// ----
	// Sass (v3.4.12)
	// Compass (v1.0.3)
	// ----

	$icons: ( one: "hey!", two: url(http://www.fillmurray.com/400/250), three: one ); @function icon($icon, $iconMap: $icons) { // check $icon exists in $iconMap @if map-has-key($iconMap, $icon) { $icon: map-get($icons, $icon); // recursive call to check for self-referencing icon keys // i.e.: $icons: ( check: "\e007", tick: check ) // @include icon(tick) will return check => "\e007" @if map-has-key($icons, $icon) { $icon: icon($icon); } } @else { @warn "The icon you called -- #{$icon} -- is not in the #{$iconMap} icon map."; @return null; } @return $icon; } @mixin icon($name, $pseudo: before, $iconMap: $icons) { &:#{$pseudo} { content: icon($name, $iconMap); @content; // allows additional CSS declarations to be passed as well } } .thing { @include icon(one) { color: red; display: block; font-family: sans-serif; font-size: 2rem; margin-bottom: .5rem; text-transform: uppercase; }; } .other-thing { &:after { content: icon(two); } } .thing-three { @include icon(three) { color: cornflowerblue; display: block; font-family: sans-serif; font-size: 2rem; margin-top: .5rem; text-transform: uppercase; }; }
	.thing:before {
	content: "hey!";
	color: red;
	display: block;
	font-family: sans-serif;
	font-size: 2rem;
	margin-bottom: .5rem;
	text-transform: uppercase;
	}

	.other-thing:after {
	content: url(http://www.fillmurray.com/400/250);
	}

	.thing-three:before {
	content: "hey!";
	color: cornflowerblue;
	display: block;
	font-family: sans-serif;
	font-size: 2rem;
	margin-top: .5rem;
	text-transform: uppercase;
	}