SCSS: Check if the element has the attribute

I need to check if the element has an attribute for the styles to apply on mobile devices(or in responsive mode). For example:

<tr>
    <td>Some text here</td>
    <td data-content="Hello there">Other text here</td>
    <td data-content="Hi there">Final text here</td>
</tr>

Browser:

------------------------------------------------------
| Some text here | Other text here | Final text here |
------------------------------------------------------

Mobile devices (Required output):

--------------------------------
| Some text here               |
| Hello there: Other text here | 
| Hi there: Final text here    |
--------------------------------

SCSS:

tr {
    td {
        @if (&[data-content]) {
            &:before {
                content: attr(data-content) ":";
            }

            float: left;
            font-size: 12px;
            font-weight: bold;
            margin: 0 5px 0 0;
            text-transform: uppercase;
        }
    }
}

Mobile devices (Current output):

--------------------------------
| : Some text here             |
| Hello there: Other text here | 
| Hi there: Final text here    |
--------------------------------