Question

我想像这样给头条新闻图标（背景图片）：

.icon_girl {
    background-image: url('data:image/svg+xml;charset=UTF-8, ... SVG code ...');
}

现在我想给H1，H2，H3等不同的尺寸。我试过了：

.icon_girl {
    background-image: url('data:image/svg+xml;charset=UTF-8, ... SVG code ...');

    &h1 {
        background-size: 37px;
        padding-left: 48px;
    }

    &h2 {
        background-size: 30px;
        padding-left: 38px;
    }
}

但是，这肯定不起作用。但也许你知道我想要什么。怎么做？

Answer 1

如果你想得到这种选择器h1.icon_girl，你必须使用插值和@at-root指令从嵌套它的根选择器中提取当前选择器。

<强> SASS

.icon_girl {
    background-image: url('data:image/svg+xml;charset=UTF-8, ... SVG code ...');

    @at-root h1#{&}  {
        background-size: 37px;
        padding-left: 48px;
    }

    @at-root h2#{&}  {
        background-size: 30px;
        padding-left: 38px;
    }
}

<强>输出

.icon_girl {
  background-image: url("data:image/svg+xml;charset=UTF-8, ... SVG code ...");
}
h1.icon_girl {
  background-size: 37px;
  padding-left: 48px;
}
h2.icon_girl {
  background-size: 30px;
  padding-left: 38px;
}

SASS - 选择课程标题

1 个答案: