小编rde*_*ara的帖子

我有一些非常重复的CSS,我希望sass能够简化.基本上我有一系列的项目,根据他们的水平有一些背景条纹.我正在使用背景渐变来创建这些条纹.我试图在我的background-image属性中使用for循环,但显然这是不可接受的sass.这是我试图做的一个非常简单的例子.

关于如何绕过这个循环限制的任何想法？

.master {
    @for $i from 1 through 10 {

    .item-#{$i} {
        background-image:
            @for $j from 1 through $1 {
                linear-gradient(90deg, red 7px, #fff 1px),
            }
            linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
            }
    }
}

期望的结果:

.master .item-1 {
    background-image:
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}

.master .item-2 {
    background-image:
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}

.master .item-3 {
    background-image:
        linear-gradient(90deg, red …

我有一个带有文字和图标的表格单元格.我希望两个元素都链接到同一个地方.我希望文本对齐到左侧,图标对齐到表格单元格的右侧.代码看起来像这样:

<td><a href="#">Text<span>icon</span></a></td>

编辑:我编辑了代码来代表我最初没有包含的一些要求.文本和图标都必须是链接.

另外,<a>当用户点击标签时,我会抓住标签的宽度.如果我将文本和图标切割成两个不同的标签,我的测量结果将不准确.