Mastering Sass

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 ...