background-imageやborder-colorにcurrentColorを使う

変数みたいなことがでける

プレーンCSSで唯一使える変数（みたいなやつ）currentColorを使うと、background-imageやbackground-color、border-colorをcolorで設定できます。オメガ嬉しいときもあるけれど、日常的にはあってもなくても感もあります。

html

<div class="foo red"></div>
<div class="foo green"></div>
<div class="foo blue"></div>

css

.foo{
    width:100px;
    height:100px;
    margin:10px;
    background-image:linear-gradient(to bottom,
        currentColor 20%,
        transparent 20%,
        transparent 40%,
        currentColor 40%,
        currentColor 60%,
        transparent 60%,
        transparent 80%,
        currentColor 80%);
    border:1px solid currentColor;
}
.red{
    color:red;
}
.green{
    color:green;
}
.blue{
    color:blue;
}

動作サンプル