Tag: sass

Sass maps for color families

First time using Sass maps. Trying to easily create lots of css classes for a particular color.

	// ----
	// Sass (v3.4.14)
	// Compass (v1.0.3)
	// ----

	// Stacked Viz
	$viz-stacked-colors: ("orange": #F8D592 #F9A153 #FD7835 #C14040 #91233D, "red": #FEC9AD #FFA48B #EA7171 #B03C64 #7E095B, "green": #B1ECA7 #6CDF97 #37BE95 #137B7E #294469, "blue": #98DFE9 #51BBDF #3685D3 #4F50A6 #4E2969, "purple": #F9B2D2 #E188C3 #A853A8 #74459A #34307B);

	@mixin viz-stacked-colors {
	@each $name, $colorList in $viz-stacked-colors {
	@for $i from 1 through 5 {
	.viz-stacked-#{$name}-#{$i} {
	background-color: nth($colorList, $i);
	}
	}
	}
	}

	@include viz-stacked-colors;

by GitHub

	.viz-stacked-orange-1 { background-color: #F8D592; }

	.viz-stacked-orange-2 { background-color: #F9A153; }

	.viz-stacked-orange-3 { background-color: #FD7835; }

	.viz-stacked-orange-4 { background-color: #C14040; }

	.viz-stacked-orange-5 { background-color: #91233D; }

	.viz-stacked-red-1 { background-color: #FEC9AD; }

	.viz-stacked-red-2 { background-color: #FFA48B; }

	.viz-stacked-red-3 { background-color: #EA7171; }

	.viz-stacked-red-4 { background-color: #B03C64; }

	.viz-stacked-red-5 { background-color: #7E095B; }

	.viz-stacked-green-1 { background-color: #B1ECA7; }

	.viz-stacked-green-2 { background-color: #6CDF97; }

	.viz-stacked-green-3 { background-color: #37BE95; }

	.viz-stacked-green-4 { background-color: #137B7E; }

	.viz-stacked-green-5 { background-color: #294469; }

	.viz-stacked-blue-1 { background-color: #98DFE9; }

	.viz-stacked-blue-2 { background-color: #51BBDF; }

	.viz-stacked-blue-3 { background-color: #3685D3; }

	.viz-stacked-blue-4 { background-color: #4F50A6; }

	.viz-stacked-blue-5 { background-color: #4E2969; }

	.viz-stacked-purple-1 { background-color: #F9B2D2; }

	.viz-stacked-purple-2 { background-color: #E188C3; }

	.viz-stacked-purple-3 { background-color: #A853A8; }

	.viz-stacked-purple-4 { background-color: #74459A; }

	.viz-stacked-purple-5 { background-color: #34307B; }

by GitHub

Line 2 defines the keys and colors.

Line 9 This mixin loops through and outputs the actual css.

line 19 finally calls the mixin.

SCSS triangle mixin

I just started using SASS and I love it. Can’t believe how slow I’ve been to adopt it’s power! Anyways, here’s a quickie css triangle mixin. It should be pretty self-explanatory.

January 17, 2014