Milligram: ハイライトの色を簡単に変更（＃9b4dca）

作成日 2018年02月22日 · 6コメント · ソース: milligram/milligram

CSS3変数（カスタムプロパティ）を使用すると、CSSの1行のハイライトカラーを上書きできます。

ミリグラムでは、cssは次の線に沿って何かを持っています：

:root {
  --highlight-color: #9b4dca;
}

次に、すべての#9b4dcaをvar(--highlight-color)に置き換えます。

これが完了すると、ハイライトの色を、custom.cssファイルを次のように含めるのと同じくらい簡単に置き換えることができます。

:root {
  --highlight-color: #abcabc;
}

Hacktoberfest new feature

ソース

mterron

👍10 ❤3

最も参考になるコメント

私は同じことのためにここに来ました^^しかしそれはSASSで書かれていて、古いブラウザをサポートしたいかもしれないので、私はこのようなもっとフォールバックの証明された例をすることをお勧めします：

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

このように、CSSカスタムプロパティをサポートしていないブラウザは、引き続き機能するバージョンにフォールバックします。また、この方法では、 var()がすでにフォールバックオプションを提供しているため、実際のスタイルシートに:root {}は必要ありません。

乾杯、
ドミニク

dkundel 2018年03月23日

👍6

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

乾杯、
ドミニク

dkundel 2018年03月23日

👍6

これまでのところ、彼らの進歩や何かが行われていますか？ 😄

timrossback 2019年06月29日

これまでのところ、彼らの進歩や何かが行われていますか？ 😄

いつでもsrc/_Color.sass sass --update再コンパイルできます。独自のsassファイルを追加することもできます。

dntzbgh 2019年06月29日

これまでのところ、彼らの進歩や何かが行われていますか？ 😄
いつでもsrc/_Color.sass sass --update再コンパイルできます。独自のsassファイルを追加することもできます。

いい視点ね！私はSassを使用していないので、もう少しすぐに使えるソリューションを探していると思いますが、 /dist/milligram.min.cssの値自体を変更する以外に、それを簡単に行う方法がわかりません。

timrossback 2019年06月30日

👍1

このフレームワークが大好きです！この機能がリリースされるのを待ちきれません🚀

cilim 2020年08月26日

ねえ@ mterron @dkundel@ timrossback @dntzbgh @cilim

多分このようなもの？
https://github.com/milligram/milligram/pull/262/files#diff -7b0a61514569d183adbda861549f9d98

cjpatoilo 2020年08月27日

👍2

このページは役に立ちましたか？

0 / 5 - 0 評価