Generated by SassMeister.com.

SassMeister-input.scss

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

$icons: (
	collapse: (
		dimensions: (
			x: 18,
			y: 18
		),
		urls: (
			default: (
				svg: "../media/icons/collapse--default.svg",
				svgInline: "url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiPjxwYXRoIG9wYWNpdHk9Ii4zMDIiIGQ9Ik01LjAzMSA5LjQ2OXYtLjkzOGg3LjQzOHYuOTM4aC03LjQzOHptMy45NjkgOC41MzFjNC45NzEgMCA5LTQuMDI5IDktOXMtNC4wMjktOS05LTktOSA0LjAyOS05IDkgNC4wMjkgOSA5IDl6IiBmaWxsPSIjNjU2YzcyIi8+PC9zdmc+)",
				png: "../media/icons/collapse--default.png",
				pngInline: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAYFBMVEUAAABcc3NqampiYnVda2tra3hmZnJhbW1hbXltbXloaHNib3VmbHJjaW9kam9ibXJlbXJjbHBjbHRnbHRmanJmbnJlbXFkbHBkbHNmanFmbXFlbG9janFnanFlbHBka3Jx16zCAAAAIHRSTlMACwwNExMUFRUVFicoKTAxOjs7Ozw8QUJCSEhJSkpLTKaavX0AAAB2SURBVBgZXcGJFoIgFATQETWXCswVEZ3//8tepB7lXgS1sdtqTYVDOnDXKwSPhSeXQ6QLL5wCMPCmBWpGShhGNCwjEzaK1zP4UHisFO+/jsLDMjLCMKJRMVIAPW8aAMrxYk4gcsfTnCFQLXdNgkOpJ+9HXeDnC2LLHOhYcxa5AAAAAElFTkSuQmCC)"
			),
			inverted: (
				svg: "../media/icons/collapse--inverted.svg",
				svgInline: "url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiPjxwYXRoIG9wYWNpdHk9Ii4zMDIiIGQ9Ik01LjAzMSA5LjQ2OXYtLjkzOGg3LjQzOHYuOTM4aC03LjQzOHptMy45NjkgOC41MzFjNC45NzEgMCA5LTQuMDI5IDktOXMtNC4wMjktOS05LTktOSA0LjAyOS05IDkgNC4wMjkgOSA5IDl6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)",
				png: "../media/icons/collapse--inverted.png",
				pngInline: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAARVBMVEUAAAD+/v7////+/v7+/v7////+/v7+/v7+/v7////+/v7////+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v79clibAAAAF3RSTlMACwwNExQVFicoKTAxOjs8QUJISUpLTGU1OOMAAABvSURBVBgZXcEBFoIgAETBLxpWIAji3v+oEWlPmaGZfdpL8pbTGHWIhuax6S9PVOOmi2yAqJsAszoWr44jqZPYVb2eTVBVKKreP0FVIamz4tVxWHUsRN0sgMm6yAPVlPWXJxoTdFgGTtalUlZn+foA1bYUp3E2HPcAAAAASUVORK5CYII=)"
			)
		)
	),
	expand: (
		dimensions: (
			x: 18,
			y: 18
		),
		urls: (
			default: (
				svg: "../media/icons/expand--default.svg",
				svgInline: "url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiPjxwYXRoIG9wYWNpdHk9Ii4zMDIiIGQ9Ik05LjQ2OSA0Ljc0NnYzLjI4NWgzLjI3di45MzhoLTMuMjd2My41aC0uOTM4di0zLjVoLTMuMjd2LS45MzhoMy4yN3YtMy4yODVoLjkzOHptLS40NjkgMTMuMjU0YzQuOTcxIDAgOS00LjAyOSA5LTlzLTQuMDI5LTktOS05LTkgNC4wMjktOSA5IDQuMDI5IDkgOSA5eiIgZmlsbD0iIzY1NmM3MiIvPjwvc3ZnPg==)",
				png: "../media/icons/expand--default.png",
				pngInline: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAaVBMVEUAAAB/f38/Pz9cc3NqampiYnVda2tra3hmZnJhbW1hbXltbXloaHNjbm5ib3VjaW9kam9ibXJlbXJjbHBjbHRnbHRmanJmbnJlbXFkbHBkbHNmanJmanFmbXFlbG9janFnanFlbHBka3LFET6vAAAAI3RSTlMAAgQLDA0TExQVFRUWFycpMDE6Ozs7PDxBQkJDSEhJSkpLTPvAWbQAAACHSURBVBjTbZDLFoIwEEMvpYg8VFBEqGAh//+RLqgcRLOZnDuTWQQAytrNk6sLPkoeCmrtQo4vrRpTgGRDpNECIeWey2ygDOvzJZiceo8q3B71zJJUGhNFxpwkyTPtr/xvsPv3vgjudg8mg1ZfugJ23JIhBkg3bDgsVdhmTcVrY3nVe99VGQBvywsfGYj/vCgAAAAASUVORK5CYII=)"
			),
			inverted: (
				svg: "../media/icons/expand--inverted.svg",
				svgInline: "url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiPjxwYXRoIG9wYWNpdHk9Ii4zMDIiIGQ9Ik05LjQ2OSA0Ljc0NnYzLjI4NWgzLjI3di45MzhoLTMuMjd2My41aC0uOTM4di0zLjVoLTMuMjd2LS45MzhoMy4yN3YtMy4yODVoLjkzOHptLS40NjkgMTMuMjU0YzQuOTcxIDAgOS00LjAyOSA5LTlzLTQuMDI5LTktOS05LTkgNC4wMjktOSA5IDQuMDI5IDkgOSA5eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==)",
				png: "../media/icons/expand--inverted.png",
				pngInline: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAATlBMVEUAAAD////////+/v7////+/v7+/v7////+/v7+/v7+/v7+/v7+/v7////+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v4UTIEIAAAAGnRSTlMAAgQLDA0TFBUWFycpMDE6OzxBQkNISUpLTDhJQH0AAAB/SURBVBjTbVDREoMgDKvoGG6CQMcq//+j0lG5iealvTTpNQVgzA43QmfgwCNkQZgq8/zmhqR/mj+mcKwTF35q9WWzjN+LNAZcT1nAnkLYuMxKDYNSL+4JqFfR1Rjv1hvpvG9HQMgnrOX6KZ0CjRxSpz520fnmGtvHjEWiaOsLd2iGFxIG5NIZAAAAAElFTkSuQmCC)"
			)
		)
	)
);

// Mixins
@mixin icon($name, $variant: "default", $extend: true) {
	$icon: map-get($icons, $name);

	@if $icon == null {
		@error "No icon '#{$name}' found";
	}
	
	$dimensions: map-get($icon, dimensions);
	$urls: map-get($icon, urls);
	$urls: map-get($urls, $variant);
	
	@if $urls == null {
		@error "No variant '#{$variant}' of icon '#{$name}' found";
	}

	@if $extend {
		@extend %icon_#{$name}_#{$variant};
	} @else {
		@include _iconStyles($name, $variant);
	}
}

@mixin _iconStyles($name, $variant: "default", $skipDimensions: false, $skipFallback: false) {
	$icon: map-get($icons, $name);
	$dimensions: map-get($icon, "dimensions");
	$urls: map-get($icon, "urls");
	$urls: map-get($urls, $variant);

	background-image: map-get($urls, "svgInline");
	background-repeat: no-repeat;

	@if $skipDimensions != true {
		background-size: contain;
		height: pxToEm(map-get($dimensions, "x"));
		width: pxToEm(map-get($dimensions, "y"));
	}

	@if $skipFallback != true {
		.no-svg & {
			background-image: url(map-get($urls, "png"));
		}
	}
}

// Placeholders
%icon_collapse_default {
	@include _iconStyles("collapse", "default");
}
%icon_collapse_inverted {
	@include _iconStyles("collapse", "inverted");
}

%icon_expand_default {
	@include _iconStyles("expand", "default");
}
%icon_expand_inverted {
	@include _iconStyles("expand", "inverted");
}

// Examples
.test1 {
	@extend %icon_collapse_default;
}
.test2 {
	@include icon("collapse", "inverted");
}

SassMeister-output.css

.test1 {
  background-image: "url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiPjxwYXRoIG9wYWNpdHk9Ii4zMDIiIGQ9Ik01LjAzMSA5LjQ2OXYtLjkzOGg3LjQzOHYuOTM4aC03LjQzOHptMy45NjkgOC41MzFjNC45NzEgMCA5LTQuMDI5IDktOXMtNC4wMjktOS05LTktOSA0LjAyOS05IDkgNC4wMjkgOSA5IDl6IiBmaWxsPSIjNjU2YzcyIi8+PC9zdmc+)";
  background-repeat: no-repeat;
  background-size: contain;
  height: pxToEm(18);
  width: pxToEm(18);
}
.no-svg .test1 {
  background-image: url("../media/icons/collapse--default.png");
}

.test2 {
  background-image: "url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiPjxwYXRoIG9wYWNpdHk9Ii4zMDIiIGQ9Ik01LjAzMSA5LjQ2OXYtLjkzOGg3LjQzOHYuOTM4aC03LjQzOHptMy45NjkgOC41MzFjNC45NzEgMCA5LTQuMDI5IDktOXMtNC4wMjktOS05LTktOSA0LjAyOS05IDkgNC4wMjkgOSA5IDl6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)";
  background-repeat: no-repeat;
  background-size: contain;
  height: pxToEm(18);
  width: pxToEm(18);
}
.no-svg .test2 {
  background-image: url("../media/icons/collapse--inverted.png");
}