How to get started with Sass

[Rss Bot 1]

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.

• What is 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.

Get the tutorial files

To download the example files for this tutorial, go to FileSilo, select Free Stuff and Free Content next to the tutorial. 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.

03. Set basic styles

Moving over to the CSS editor we'll start by including font-awesome, setting a variable for our base font-size and some basic styles for the page. 

04. Create a basic function

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.

05. Make mixins

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.

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.

07. Display your icons in a row

In order for our social icons to display in row we'll add some simple CSS to each of their containers.

08. Create a shared icon style

To minimise the amount of CSS we output we'll be using a CSS3 selector to find all classes beginning with 'icon' and create a shared style for them.

09. Style up button backgrounds

Using the same method we'll do the same for the buttons defining our values in 'em', allowing us later to resize them using the container.

10. @each loop for our icons

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.

11. @each loop for our background colours

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.

12. Use the mixins

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.

13. Add interaction states and built-in functions

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.

14. Transition the background colour

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.

15. Add further transition effects

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.

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.

17. Add a drop shadow

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.

18. Add tooltips

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.

19. Modify the @each loop

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.

20. Style the before pseudo element

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.

21. Style the after pseudo element

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.

The CodePen Collection of tutorial steps can be found here.

This article originally appeared in Web Designer magazine issue 264. Buy it here.

Read more:

• What is Sass?
• 8 CodePen features you didn't know about
• 5 tips for super-fast CSS

View the full article