SCSS：检查元素是否具有属性答案

【问题标题】：SCSS: Check if the element has the attributeSCSS：检查元素是否具有属性
【发布时间】：2020-07-09 03:03:07
【问题描述】：

我需要检查元素是否具有样式属性以应用于移动设备（或在响应模式下）。例如：

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

浏览器：

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

移动设备（必需输出）：

--------------------------------
| 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;
            }
        }
    }
}

移动设备（电流输出）：

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

【问题讨论】：

这里根本不需要，只需在媒体查询中定义样式即可。
试过了，其实SCSS代码其实是来自媒体查询。

标签： if-statement sass attributes exists

【解决方案1】：

我找到了解决方案。显然这很容易......

SCSS：

tr {
    td {
        ...

        &[data-content] {
            &:before {
                content: attr(data-content) ":";
                float: left;
                font-size: 12px;
                font-weight: bold;
                margin: 0 5px 0 0;
                text-transform: uppercase;
            }
        }
    }
}

当前输出：

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

【讨论】：