O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Tagcloud

The next section of the page I want to look at is the tag cloud in the footer. We've already added an unordered list containing list items with classes for each size such as xs, sm, md, and so on. Now let's create a mixin which we can apply to the unordered list which will automatically add all of our font sizes accordingly.

Create a file in scss/helpers/mixins called _tag-cloud.scss. Inside, we'll create our mixin:

@mixin tag-cloud($base: 1em) { 
    .xs { 
        font-size: ($base * 0.5); 
    } 
 
    .sm { 
        font-size: ($base * 0.75); 
    } 
 
    .md { 
        font-size: $base; 
    } 
 
    .lg { 
        font-size: ($base * 1.25); 
    } 
 
    .xl { 
        font-size: ($base * 1.5); 
    } 
} 

As you can see, we've set a base font size of 1em. The md class will be the default size. The sm class will be one quarter of our ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required