今回は変数名についてまとめてみました。変数名や@mixin名、@function名に使える名前には規則があります。名前についての実験と結果を載せていますので、参考になればと思います。

変数名の規則

これは、 @mixin や、 @function で使う名前も同様です。使える文字は以下になります。

$example: 0;
$example2: 0;
$_example: 0;
$-example: 0;
$例: 0;

上記の例のように使うことはないと思いますが、実は日本語も使えます。以下のコードは変数名として使えないものです。

$1example: 0;
$example@: 0;

変数名の先頭文字が数値出会った場合はコンパイルエラーとなります。また、使用できない記号を使用した場合も同様です。

CSS3 をオーバーラップする

CSS3 のプロパティ名にあたる「 rgba 」「 border-radius 」などは同名の @mixin や @function を定義することができます。同名のプロパティ名を使用した場合は、既存のプロパティではなく自分で定義した方が使用されます。つまり、CSS3 をオーバーラップ(上書き)することができます。以下のコードを見てください。

@function rgba($value...) {
    // rgbaを自作する
    ...
}

body {
    color: rgba(255,255,255,0.5);
}

このように上書きすると、 body タグ内で使用している rgba は、自作の方の rgba が呼び出されます。つまり、 CSS3 の機能を上書きして、エラー処理などを作ることができるのです。

オーバーラップ時の問題点

これで完璧なライブラリが作成できる！と思っていた私は早速この機能を使いましたが、 Sass のコンパイルを通すと無限ループに陥っていました。以下のコードが原因です。

@function rgba($value...) {
    // 問題があればエラーの処理
    ...

    // 問題がなければ既存のrgbaを出力する
    ...
}

6 行目でコンパイルエラーです。これは、 @function の rgba を無限に呼び出してしまいます。もちろん、以下のように回避しようとしてもダメでした。

@function MTRrgba($value...) {
    // 問題があればエラーの処理
    ...

    // 問題がなければ既存のrgbaを出力する
    ...(既存のrgbaを呼び出す)
}

// その他オーバーラップしたライブラリ
...

// 再度オーバーラップする
@function rgba($value...) {
    @return MTRrgba($value...);
}

Sass には厳格な namespace の概念が無いようなので、全てグローバルな関数となってしまいます。そのため rgba を間接的に呼びだそうとしても無限ループに陥ってしまいます。既存の処理を呼び出す処理が必要な場合は、このように完全なオーバーラップを作ることができません。

問題点を解決する

以前に hsla を自作するという記事を書きました。記事は以下になります。
　
「SassでHSLAをRGBAに変換する – JavaScriptの記述を減らす！」
　
実はわざわざこんな処理を作ったのもこれが理由です。既存の処理が使えないなら”作ればよい”のです。そうすれば既存の処理を呼び出す必要もありません。これで安心してライブラリ制作ができますね！

追記 2012/09/23

もう一つ既存のプロパティを呼び出す方法がありました。それはインターポレーションを使用する方法です。少々見苦しいかもしれませんが、以下のソースを見てください。

$red: 100;
$green: 50;
$blue: 200;
$alpha: 0.5;

@debug #{"rgba("}$red#{", "}$green#{", "}$blue#{", "}$alpha#{")"};

このように rgba 自体を文字列として出力することで、結果的に CSS へ rgba を書き出すことができます。この方法を使えば、無理やりではありますが既存のプロパティを使用することができますね。