web-dev-qa-db-ja.com

SASSのdarken（）と同様のCSS変数を使用して色合いを作成する方法は？

SCSSで行うようにCSS変数を変更する方法を探しています

プライマリのような色を定義します-そして自動的に私はフォーカスとアクティブ状態のシェードを取得します。基本的に、CSS変数の1つの変数を変更して、同じ色の3つの色合いを取得します。

CSSで達成したいこと

$color-primary: #f00;

.button {
    background: $color-primary;

    &:hover,
    &:focus {
        background: darken($color-primary, 5%);
    }

    &:active {
        background: darken($color-primary, 10%);
    }
}

達成しようとしている：

:root {
    --color-primary: #f00;
    --color-primary-darker: #f20000  //     var(--color-primary) * 5% darker
    --color-primary-darkest: #e50000 //     var(--color-primary) * 10% darker
}

.button {
    background: var(--color-primary);
}

.button:hover,
.button:focus {
    background: var(--color-primary-darker);
}

.button:active {
    background: var(--color-primary-darkest);
}
csssasscss-variables
8
Daniel

hsl() 色を考慮して、単純に明度を制御できます。

_:root {
    --color:0, 100%; /*the base color*/
    --l:50%; /*the initial lightness*/
    
    --color-primary: hsl(var(--color),var(--l));
    --color-primary-darker: hsl(var(--color),calc(var(--l) - 5%));
    --color-primary-darkest: hsl(var(--color),calc(var(--l) - 10%)); 
}

.button {
    background: var(--color-primary);
    display:inline-block;
    padding:10px 20px;
    color:#fff;
    cursor:pointer;
}

.button:hover,
.button:focus {
    background: var(--color-primary-darker);
}

.button:active {
    background: var(--color-primary-darkest);
}_
_<span class="button">some text</span>_

補足として、 darken() も同じことをしています：

色を暗くします。色と0％から100％の間の数値を取り、その明度を減らした色を返します。

15
Temani Afif