#cssvariables

[code-passion]

✨ CSS Variables: The Key to Empowering Your Stylesheets ✨

Are you ready to take your CSS skills to the next level?

Discover the magic of CSS Variables and how they can revolutionize your web design process! 🌐💻

In this blog post, you'll learn:

✅ What CSS Variables are and why they matter

✅ How to implement them in your projects

✅ Tips and tricks to maximize their potential

✅ Real-world examples to inspire your designs

Don't miss out on this game-changing technique that will make your stylesheets more dynamic, maintainable, and scalable! 🚀

Read the full article here: CSS Variables : The Key to Empowering Your Stylesheets

Follow:

LinkedIn- Skillivo

[stolpnik]

[geckotang]

CSS Variables 2014/05/22

2014年1月ごろにCodeGridで、CSS Variablesを使うという記事を書きました。

CSS Variablesは、CSSの中で独自のプロパティを定義し、その値を変数として使うことができるという仕様です。

ちなみに、今はその記事中にあるサンプルはどれも動きません。かなしいね。

間違いとか、ご意見ありましたら @GeckoTangまでどうぞ。

カスタムプロパティの接頭辞が変わった

以前は以下の様に、varを接頭辞としてカスタムプロパティを定義し、値として利用する際は、 var関数の中で接頭辞を除いたカスタムプロパティ名を指定していました。

/*css*/ :root { /* 定義 */ var-fontsize: 20px; } .medium { /* 利用 */ font-size: var(fontsize); /* 20px */ }

CodeGridの記事を書いてから、カスタムプロパティの定義・使用方法が変わり、 その接頭辞が var-* から --* に変更になっています。

/*css*/ :root { --fontsize: 20px; } .medium { font-size: var(--fontsize); } /* 20px */

接頭辞が変わっただけなので、記事で書いた振る舞い自体に変更はありませんでした。

カスタムプロパティの定義

定義したカスタムプロパティはそのスコープでのみ使用できます。

カスタムプロパティが存在しない場合の代替値

各プロパティの値にvar関数を使用した時、そのカスタムプロパティがない場合は、そのプロパティの初期値が適用されます。

ですが、var関数の第二引数には、第一引数に指定したカスタムプロパティがない場合の代替値を指定することができます。

　JavaScriptからカスタムプロパティを操作する

//javascript var root = document.querySelector(':root'); root.style.var.get('--font-size'); root.style.var.set('--font-size', '30px'); root.style.var.forEach(function(propValue, propName) { console.log(propName, propValue); });

とかあるんですが、まだまだできないようです。