It is my third day using SASS, which is pretty much a crash course for me since I am simultaneously looking at using AngularJS as well. For today, I am tackling icons. The design of the website I was given uses icons, but of varying colors. I cannot just simply use background-color since it gives me a colored square chunk.

Opening up the sprite files that I was given, I realised that it is incomplete, it consist of only one color and 12 sprites in one file and scattering fews others in each of their own files, whereas I would need 8 colours and 26 sprites combined into one file. That is easily solved by using photoshop to duplicate and overlay the necessary colours.

Now onto the CSS codes. In the past, if I want to use sprites, I have to do either of the following way: code manually, or search online for an automated tool. Either methods won’t be pretty. Just the following 43 lines of codes are already needed for just one colour and 12 sprites:

.icomoon-thumbs-up,.icomoon-locked,.icomoon-volume,.icomoon-broadcast,.icomoon-screen,.icomoon-mobile,.icomoon-thumbs-up2,.icomoon-smiley,.icomoon-heart,.icomoon-monitor,.icomoon-mobile2,.icomoon-lock-fill {
display: inline-block;
width: 64px;
height: 64px;
background-image: url(#{$domain}#{$fldrTest}#{$dirAssets}img/sprites.png);
background-repeat: no-repeat;
}

.icomoon-thumbs-up {
background-position: 0 0;
}
.icomoon-locked {
background-position: -128px 0;
}
.icomoon-volume {
background-position: -256px 0;
}
.icomoon-broadcast {
background-position: -384px 0;
}
.icomoon-screen {
background-position: -512px 0;
}
.icomoon-mobile {
background-position: -640px 0;
}
.icomoon-thumbs-up2 {
background-position: -768px 0;
}
.icomoon-smiley {
background-position: -896px 0;
}
.icomoon-heart {
background-position: -1024px 0;
}
.icomoon-monitor {
background-position: -1152px 0;
}
.icomoon-mobile2 {
background-position: -1280px 0;
}
.icomoon-lock-fill {
background-position: -1408px 0;
}

8 colours and at least twice the number of sprites, it will be much more. Hence, a brainwave: “Wait. SASS has variables… So like any other languages, it should have array-like implementation as well!” I didn’t get past the basic video tutorial on Youtube, you see. To cut the long story short, I searched the documentation and condensed the codes to just 20 lines or so in SASS. Being in a rush, I am not considering if it can be condensed further. If anyone does have an idea, do give me a shoutout. The resultant CSS codes generated is 629 lines long!

$icomoonNames: thumbs-up locked volume broadcast screen mobile thumbs-up2 smiley heart monitor mobile2 lock-fill cancel-circle envelope download upload arrow-right arrow-left back front paypal search share mail facebook twitter;
$icomoonLeftPositions: 12 -116 -244 -372 -500 -628 -756 -884 -1012 -1140 -1268 -1388 -1513 -1631 -1742 -1870 -1996 -2128 -2255 -2385 -2499 -2605 -2702 -2828 -2956 -3084;
$icomoonColors: lightblue blue orange lightorange white grayAlt grayAltLighter gray;
$icomoonTopPositions: 0 -64 -128 -192 -256 -320 -384 -448;

@for $a from 1 through length($icomoonNames) {
@for $b from 1 through length($icomoonColors) {
.icomoon-#{nth($icomoonNames, $a)}-#{nth($icomoonColors, $b)}{
@extend .icomoon;
background-position: nth($icomoonLeftPositions, $a)+px nth($icomoonTopPositions, $b)+px;
}
}
}

Icons taken from IcoMoon (at least this is what I can infer from the sprite files given to me).