StateFace SASS

stateFaceSass

/*
 * SASS for http://propublica.github.io/stateface/ icon set.
 * author: amurrell
 */

@font-face {
     font-family: 'icons-usa';
     src: url('../fonts/icons-usa.eot');
     src: url('../fonts/icons-usa.eot?#iefix') format('embedded-opentype'),
          url('../fonts/icons-usa.woff') format('woff'),
          url('../fonts/icons-usa.ttf') format('truetype'),
          url('../fonts/icons-usa.svg#icons-usa') format('svg');
     font-weight: normal;
     font-style: normal;
}


%icon-usa {
	font-family:"icons-usa";
	display:inline-block;
	vertical-align:middle;
	line-height:1;
	font-weight:normal;
	font-style:normal;
	speak:none;
	text-decoration:inherit;
	text-transform:none;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* Icons */
$icons_usa: 
    "alabama" "B",
    "alaska" "A",
    "arizona" "D",
    "arkansas" "C",
    "california" "E",
    "colorado" "F",
    "connecticut" "G",
    "delaware" "H",
    "florida" "I",
    "georgia" "J",
    "hawaii" "K",
    "idaho" "M",
    "illinois" "N",
    "indiana" "O",
    "iowa" "L",
    "kansas" "P",
    "kentucky" "Q",
    "louisiana" "R",
    "maine" "U",
    "maryland" "T",
    "massachusetts" "S",
    "michigan" "V",
    "minnesota" "W",
    "mississippi" "Y",
    "missouri" "X",
    "montana" "Z",
    "nebraska" "c",
    "nevada" "g",
    "new-hampshire" "d",
    "new-jersey" "e",
    "new-mexico" "f",
    "new-york" "h",
    "north-carolina" "a",
    "north-dakota" "b",
    "ohio" "i",
    "oklahoma" "j",
    "oregon" "k",
    "pennsylvania" "l",
    "rhode-island" "m",
    "south-carolina" "n",
    "south-dakota" "o",
    "tennessee" "p",
    "texas" "q",
    "utah" "r",
    "vermont" "t",
    "virginia" "s",
    "washington" "u",
    "west-virginia" "w",
    "wisconsin" "v",
    "wyoming" "x";
    
@each $i in $icons_usa {
    .icon-usa-#{nth($i, 1)}:before {
	@extend %icon-usa;
	content: nth($i, 2);
    }
}


/*

implement like <a href="#" class="icon-usa-new-mexico">my random element</a>

*/