便利なCSSメタ言語LESSを使ってみた〜大規模ウェブ

CSSのメタ言語であるLESSが便利だったので、以下でかんたんに
自分で"._border"というCSSの"border"に関する指定をまとめてできる
Mixinを定義する過程を紹介したいと思う。

@border-color: #999;

/* まずはCSSの"border"の基本的な記述をMixin化する */
._border-basic (@width: 1px, @style: solid, @color: @border-color) {
  border-width: @width;
  border-style: @style;
  border-color: @color;
}

// 各辺に対して"border-width"を指定する場合のクラス
._border-rect (@top, @right, @bottom, @left, @style: solid, @color: @border-color) {
  border-top-width: @top;
  border-right-width: @right;
  border-bottom-width: @bottom;
  border-left-width: @left;
  border-style: @style;
  border-color: @color;
}

/* "border"のパラメーターを吐くMixinを"._border"として定義する */

// "border-width"だけを指定する（または何も指定しない）場合
._border(@a: 1px)
{
  ._border-basic (@a)
}

// "border-color"だけを指定する場合
._border(@a)
  when (iscolor(@a))
{
  ._border-basic (1px, solid, @a);
}

// "border-width"と"border-color"を指定する場合
._border (@a, @b)
  when (isnumber(@a))
  and (iscolor(@b))
{
  ._border-basic (@a, solid, @b);
}

// 各辺に対して"border-width"を指定する場合
._border (@a, @b, @c, @d)
  when (isnumber(@a))
  and (isnumber(@b))
  and (isnumber(@c))
  and (isnumber(@d))
{
  ._border-rect (@a, @b, @c, @d)
}

// 各辺に対して"border-width"を指定し、かつ"border-color"を指定する場合
._border (@a, @b, @c, @d, @e)
  when (isnumber(@a))
  and (isnumber(@b))
  and (isnumber(@c))
  and (isnumber(@d))
  and (iscolor(@e))
{
  ._border-rect (@a, @b, @c, @d, solid, @e)
}

// 各辺に対して"border-width"を指定し、"border-style"と"border-color"を指定する場合
._border (@a, @b, @c, @d, @e, @f: @border-color)
  when (isnumber(@a))
  and (isnumber(@b))
  and (isnumber(@c))
  and (isnumber(@d))
  and (iskeyword(@e))
{
  ._border-rect (@a, @b, @c, @d, @e, @f)
}

すると以下のように、"._border"というクラス一つであらゆる"border"を指定できる。

div.kanako {
	._border(1px, #FF0000)
}

div.shiori {
  ._border(0, 0, 1px, 0, dotted, #FFFF00);
}