How many times, when you've visited sites, have you seen any number of social media icons at the bottom of postings? I certainly have and that's saying something, for the 3000-plus bookmarked sites I've bookmarked over the years! (I think it went as high as 12,000+ sites before I trimmed out the duplicates, chuckle!).
Normally you might embed icons in the page for them and build up similar styles for each – this could potentially be a real bore, as the styles won't change from icon to icon and it is likely to produce a lot of code! Now, how about producing the same amount of compiled code, but from less than 20 lines of code? We'll see how, as part of the next exercise.
You'll need your trusty text editor. Ideally this should be Sublime Text 2, as we will be compiling SCSS code. We'll also need some social media icons, for which there are plenty of sources available on the Internet. As an example, you could try the ones available at GoSquared (https://www.gosquared.com/resources/gosocial). As well as getting the icons, you will need to rename each icon you use to the format icon-XXXXXX.png, where XXXXXX is the name of the social network, such as LinkedIn. I will assume we are using these icons during the exercise, and that they have been suitably renamed.
We'll begin by creating our template. Go ahead and create a new document, and add the following code in the
<head>tag area. Then save it associalmedia.html.<link rel="stylesheet" type="text/css" href="socialmedia.css"> <link href='http://fonts.googleapis.com/css?family=Macondo' rel='stylesheet' type='text/css'>
Add the following code in between the
<body>tags:<body> <a class="icon-deviantart" href="http://www.deviantart.com">deviantart</a> <a class="icon-digg" href="http://www.digg.com">digg</a> <a class="icon-facebook" href="http://www.facebook.com">facebook</a> <a class="icon-forrst" href="http://www.forrst.com">forrst</a> <a class="icon-lastfm" href="http://www.last.fm">last.fm</a> </body>
Next up we'll need our SCSS code, so create a new SCSS file in Sublime Text 2, and save it as
socialmedia.scss. Add the following code:@each $socnet in facebook, digg, deviantart, forrst, lastfm { a.icon-#{$socnet} { padding: 5px 40px 20px; color: #8B4513; display: block; background: url('images/icon-#{$socnet}.png') no-repeat left top; width: 100px; font-family: 'Macondo', cursive; font-weight: bold; font-size: 24px; text-decoration: none; &:hover { text-decoration: underline; } } }If all is well, you will see the following screenshot when you preview your work in a browser (we've added a Google Web font, to give the icons some style!):
Although this exercise was deliberately designed to be simple, it serves up a perfect example of how you can cut down the amount of code you need to write, while still maintaining the same result.
Here, we've used the power of @each to loop through each name specified, and to create the appropriate styles using the rules specified:
padding: 5px 40px 20px;
color: #8B4513;
display: block;
background: url('images/icon-#{$socnet}.png') no-repeat left top;
width: 100px;
font-family: 'Macondo', cursive;
font-weight: bold;
font-size: 24px;The beauty of this is that it cuts down the amount of repetitive code you have to write in your stylesheet. Provided the same format is used throughout, then each icon will receive the same styles (apart from the name of the image, naturally). To see how effective this is, have a look at the compiled code in Sublime Text 2. My copy listed 64 lines of styling code, compared to the 16 we've had to write. That's a real difference, isn't it?
Note
A small word of advice. This is a very powerful part of the library; the developers recommend that this should only be used when creating mixins, and not in the course of day to day styling as they require a fair amount of flexibility.
Let's move on, and turn our attention to another part of the library, and one I am sure you will be using regularly – mixins. I'll show you how over time, you can build up a library of reusable code that can be dropped in at a moment's notice.
