Create Status Indicators Using Sass Mixin

Sass Mixin Status Indicator
Traffic Signal
Traffic Signal

Many times, we may need to show the status of the process in an application. Some colors speak clear enough to show the current status without saying a word. We have the great example of the traffic signal as a global indication system. The same thing applies to the web also. If we talk about any social or chat application, they must indicate the status of the users in certain way. They might use icon, colors or text. In this article, we are going to develop a status indicator for a tabular data using Sass mixin and jQuery.

Interesting Stories on Sass:
- 5 Most Popular Sass Mixins
6 Signs You Should Invest In Sass

The Plan

Let's assume a table having number of rows with - task title and relevant status.

HTML code

<table>
    <tr>
        <th>Task Title</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>Task 1</td>
        <td><i data-status=""></i> Done</td>
    </tr>
    <tr>
        <td>Task 2</td>
        <td><i data-status=""></i> In Progress</td>
    </tr>
    ...
</table>

You must notice the <i> tag having attribute data-status. We are going to write Sass mixin targeting to all data-status attribute in the last <td> of each row.

jQuery Plot

Before moving to Sass code, we need to add something dynamic over HTML tags to make that Sass be considered:

$('tr').each(function() {
    var $TR = $(this),
        $TD = $TR.find('td:last-child'),
        TDText = $TD.text(),
        TDTrimmed = TDText.trim().replace(/ /g, '_').toLowerCase(),
        $status = $TD.find('i');
 
    $status.attr('data-status', TDTrimmed);
});

In above code snippet, we are grabbing the text from the last cell of each row. Also we are using pre-defined jQuery functions like trim(), toLowerCase() and replace() to achieve our goal. We ended up by setting the replaced text to data-status attribute.

$status.attr('data-status', TDTrimmed);

Pretty much simple, right?

Sass Mixin

// placeholder containing common properties 
%indicator{
    text-indent: -9999px;
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    margin-right: 10px;

    @include borders-radius(10em);

    content: attr(data-status);
}

// defining mixins
@mixin borders-radius ($radius...) {
    -webkit-border-radius: $radius;    
       -moz-border-radius: $radius;
            border-radius: $radius;
}
@mixin status-indicator($bg: #f00 //default color) {
    @extend %indicator; // using placeholder
    background: $bg;
}

// ---- calling @mixin
i[data-status="done"]:before {
    @include status-indicator(lightgreen);
}

i[data-status="in_progress"]:before {
    @include status-indicator(orange);
}
...

In above Sass code, we first defined placeholder named %indicator having common properties required and we are going to use the same inside @mixin status-indicator. So the question is why extra placeholder? Because we can separate the code meaningfully and that makes logical separation.

Similarly, we have another @mixin borders-radius ($radius...). As the name says, it would generate border-radius and we have various browsers prefixes too. So when we use @include borders-radius(10em 5em 10em) that will compiled as below:

div {
    -webkit-border-radius: 10em 5em 10em;
       -moz-border-radius: 10em 5em 10em;
            border-radius: 10em 5em 10em;
}

Demo


Also published on Medium.