Take styling shortcuts on repetitive tasks using Sass mixins, loops and functions.
Sass is a powerful tool that brings many features from other programming languages into CSS – such as functions, variables and loops – as well as bringing its own intuitive features such as mixins, nesting and partials to name a few.
In this tutorial we'll be creating social icons using Sass loops, mixins and functions. We'll also be using the powerful nesting available in Sass.
We'll be creating a list in Sass to generate our social icons, which will consist of the classname, font reference and colour first – and later the tooltip.
And we'll be using mixins to create reusable Media Queries and creating a function to turn a pixel value into an em value. To do this we'll also be creating a variable for our base font-size.
There are a number of ways to install and use Sass depending on your system and your build tooling needs – more details can be found here – however, we'll be using CodePen to compile our Sass into CSS to keep things as simple as possible.
To truly harness the power of Sass and not get yourself into a mess of specificity and complexity a solid understanding of CSS is required. The particular flavour of Sass we'll be using is SCSS (Sassy CSS), meaning we'll still be using the curly brackets {} in our Sass code. Want to build a site with zero code? Here's our roundup of the best website builders around.
Get the tutorial files
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
To download the example files for this tutorial, go to FileSilo, select Free Stuff and Free Content next to the tutorial (then store the files in cloud storage). Note: First time users will have to register to use FileSilo.
01. Set up your CodePen CSS
Getting your CodePen CSS set up correctly is key
The first thing we'll need to do is create a new pen and change some of the default settings for the CSS editor in CodePen. We'll change the CSS Preprocessor to SCSS and turn on Normalize and Autoprefixer.
02. Start writing some code
Now we've set everything up we can start writing some code. Inside the HTML editor we'll create a container and a number of items inside containing the link and icon for each of our icons.
The names used here will be used in our Sass list as a reference in CSS. We'll also be using the BEM naming convention for our class names.
Next we'll create a basic function to turn a pixel value to an em value using our '$base-font-size' variable.
Functions in Sass are created using '@function' followed by the name of the function and the input used to perform the function.
Then inside the declaration we use '@return' to output the value when using the function. The '#{}' surrounding the calculation is used for interpolation.
Continuing on with our setup we'll create mixins for simple mobile-first media queries using our 'px-to-em' function, which we will pass in a px value to return an em value.
Mixins are created using '@mixin' followed by a name for the mixin. Then inside the declaration we use '@content' to output the code we put inside the mixin when calling it later in our codebase.
@mixin viewport--large {
@media only screen and
(min-width: px-to-em(1680px)) {
@content;
} }
@mixin viewport--medium {
@media only screen and
(min-width: px-to-em(1080px)) {
@content;
} }
06. Set up a Sass list
The last step in our setup is to create a list. Lists in Sass are created using a variable; after that the exact syntax is pretty loose, accepting a wide variety of ways to define it.
Inside the variable we'll define the class name, unicode value and colour for each icon, separating them with a comma, inside parentheses.
We’ve used our loop to generate the icons for each of our social icons
Now we have all our base styles we can use our list to generate the CSS specific to each icon.
To create a loop in Sass we use '@each' followed by names for each value of each item – '$icon', '$unicode' and '$icon-background' – followed by the word 'in' and then the name of the list.
Inside the loop we'll apply the '$unicode' value to the 'before' pseudo element of each icon we've created in the HTML, allowing the shared style we created earlier to take care of all the other styles needed.
We’ve added the background colours as well as the icons to our '@each' loop
The icons are now all working but we still have the fallback background colour. We'll add some more code to our list to fix that. Using the same method as above we'll output the '$icon' name but this time on the 'social__icon' classes and inside that the '$icon-background' colour.
Using our mixins we've updated the font size of the container to change the icons size depending on the viewport width
Using the mixins we created earlier and because we styled the icons using 'em' values we can apply a font-size to the container and increase it using our media-query mixin using '@include' and the name of the mixin followed by the code we want to include in the media-query.
We can add some interactivity to our buttons by changing the background colour when the button is interacted with either using the mouse or the keyboard.
Sass has a number of built-in colour functions allowing us to take the background colour we've set in our list and mix it with black to darken the button – when interacted with.
We can also utilise the 'transition' property in CSS to animate the differences between the background colours. We could use the 'all' value but that is both expensive in terms of performance and would not allow us to transition different values at different timings and timing-functions.
By adding a 'relative' positioning to the buttons and a top value and adding 'top' to our 'transition' property we can ready the elements for further interaction.
[class^="social__icon"] {
position: relative;
top: 0;
...
transition: background-color
150ms ease-in-out,
top 250ms linear
; }
16. Move the buttons up upon interaction
For this interaction there's nothing specific needed to create it therefore we can add the code to the shared class. By applying a negative top value and removing the outline we have an even clearer visual cue of interaction.
Using transition properties we’ve animated any interaction with the buttons – moving them up, darkening the background and adding a drop shadow
We can also use the same method to create and animate a 'box-shadow' – adding a little more depth to the interaction – changing the vertical height of the shadow at the same time as the top value.
We can easily add tooltips with CSS to add further clarity for our users. The first thing we'll do is to add the tooltip value to the list. Making sure to write them in quotes to allow the use of spaces if required.
Due to the addition to our list we'll need to modify our '@each' loop to include the tooltip value ('$name'). We can then output that name as the content of the 'before pseudo' element on our buttons.
We've added some basic styles to the tooltips again adding transitions to animate them into position
Now we have the name of each element displayed on the screen we need to style the element, adding a background colour, padding and other styling elements – as well as positioning the element and readying it for transitions and modifying the opacity and top values upon interaction.
We will use CSS triangles to create the bottom of our tooltips – again positioning the element readying it for transitions – by transitioning the opacity and top values at different timings.
By adding a delay we get an animation consisting of the tooltip fading in and moving down into place.
Steven is a digital creative from Stockton-on-Tees, UK. An experienced Head of UX, Steven has written a number of articles on web design and front-end development, as well as delivering a talk at CSSConf Budapest on the potential of CSS animations. He is currently Head of UX at Aero Commerce.
