CSS/SASS : Parent declaration in SASS

Question

这在 SASS 中是什么样子的？我不明白它会是什么样子。

.icon-button .up-arrow, 
.icon-button .down-arrow {
    background-image: url('/images/icons/sprites.png');
} 

.icon-button .down-arrow {
    background-position:20px 0;
}

.icon-button .up-arrow {
    background-position:40px 0;
}

Answer 1

你可以尝试这样的事情:

.icon-button {
    .down-arrow, .up-arrow {
        background-image: url('/images/icons/sprites.png');
    }

    .down-arrow {
        background-position:20px 0;
    }

    .up-arrow {
        background-position:40px 0;
    }
}

除许多其他功能外，SASS 还允许您添加嵌套规则。

这在您的情况下可能有点矫枉过正，但您也可以参数化一些值。仅用于演示目的:

$first: 20px;
$second: 40px;

.icon-button {
    .down-arrow, .up-arrow {
        background-image: url('/images/icons/sprites.png');
    }

    .down-arrow {
        background-position: $first 0;
    }

    .up-arrow {
        background-position: $second 0;
    }
}

如果你真的想疯狂使用它，你可以创建可重用的函数(或 SASS 术语中的“mixins”):

@mixin calcBackground($padding) {
    background-position: ($padding + 20px) 0;
}

.icon-button {
    .down-arrow, .up-arrow {
        background-image: url('/images/icons/sprites.png');
    }
    .down-arrow {
        @include calcBackground(0px);
    }

    .up-arrow {
        @include calcBackground(20px);
    }
}