cssで一つのタグの中に同じ指定をするのって面倒じゃないですか？
統一感を出せば見やすくなりますし、デザイン性もあります。
今までのようにいちいち指定して、もしやっぱり変更したいってなったとき一個一個訂正しなければなりません。
でも、関数を宣言していれば、その箇所だけを訂正するだけで済みます。
このようなメリットがあるのでぜひ使用することをオススメします。
では、具体的な使用方法を見ていきましょう。
例えばh1タグの中に文字、下線を指定し同じ色にする場合を見てみましょう。
記述法ですが、
h1 {
--my-color:red
color:var(--my-color);
}
このように文字の前にハイフンを２回つけるのがポイントです。
「--my-color」を宣言し、「var」を付けて入力するだけです。
h1 {
--my-color:red
color:var(--my-color);
border-left:5px solid var(--my-color);
}
こんな感じですね。
ただ、これはh1タグの中でしか効果がなく、これを他のタグでも使いたい時もありますよね。
そんな時には継承して使うことができます。
やり方は簡単です。
h1と他のタグの親に宣言すればいいのです。
仮にbodyが親であれば、
body {
--my-color:red;
}
h1 {
color:var(--my-color);
border-left:5px solid var(--my-color);
}
p{
color:var(--my-color);
}
これでOKです。もしhtml全体に適用したい場合であれば、
上記のbodyの箇所を:rootにすれば良しです。
ここで注意点ですがpxなどの単位をつける場合であれば、必ず「宣言時に付けましょう。」
paddingを付けたい場合
--my-margin:50px;としてあげましょう。
h1 {
--my-margin:50px;
margin-right:var(--my-margin);
とします。
どうしても単位を付けたい場合であれば少し応用ですが、calc()を使いましょう。
どのようにするかというと
body {
--my-margin:50;
}
h1 {
margin:var(calc(--my-margin)*1px);
}
１pxをかけることでmarginが追加されます。
まとめると、CSS関数は
「メリット」
・まとめて同じ指定ができる。
・宣言箇所を訂正するだけで全て変更可能。
「注意点」
・単位の扱い（どうしても付け加えたい場合はcalc()を使いその後に使いたい単位で掛けてあげる）
とても便利な指定方法なので是非使ってみてください。
以上CSS関数でした。