Google Closure StylesheetsによってCSS作業が簡単に

作者 Abel Avram , 翻訳者 福田 寅成 投稿日 2011年11月24日

セクション

デベロップメント

トピック

CSS ,

JavaScript ,

Java ,

動的言語 ,

Markup Languages ,

Google ,

言語 ,

プログラミング

共有 |

原文(投稿日：2011/11/12)へのリンク

GoogleはApache License 2.0のオープンソースなClosure Stylesheetsを公開した。これはClosure Toolsパッケージに属しているユーティリティでCSSを扱う際に便利である。Closure StylesheetsはCSSに変数や関数、条件やmixinを追加し、大きなCSSファイルを扱う作業を簡単にしてくれるJavaプログラムである。開発者はGoogle Stylesheets（GSS）を作成し、それがツールによって処理され、Webアプリケーションやウェブサイトで用いられる実際のCSSファイルが生成される。

変数

変数は‘@def’を用いて定義する。下記は変数を用いた簡単な例である。

@def BG_COLOR              rgb(235, 239, 249);
@def DIALOG_BG_COLOR       BG_COLOR;



body {
  background-color: BG_COLOR;
}

.dialog {
  background-color: DIALOG_BG_COLOR;
}

結果のCSS。

body {
  background-color: #ebeff9;
}
.dialog {
  background-color: #ebeff9;
}

関数

Closure Stylesheetsはピクセルのような数値を扱う多くの算術関数を導入している。例えばadd()、sub()、mult()、div()、min()やmax()などである。これらの関数を用いた例は下記のようになる。

@def LEFT_WIDTH    100px;
@def LEFT_PADDING  5px;
@def RIGHT_PADDING 5px;



.content {
  position: absolute;
  margin-left: add(LEFT_PADDING,
                   LEFT_WIDTH,
                   RIGHT_PADDING,
                   px);

結果のCSSブロック。

.content {
  position: absolute;
  margin-left: 110px;
}

条件

Closure Stylesheetsは@if、@elseif、@elseを用いて、値に基づいた条件文を作る事が出来る。

Mixin

Mixinは次の例のようにパラメータ化された宣言を再利用するための仕組みである。

@defmixin size(WIDTH, HEIGHT) {
  width: WIDTH;
  height: HEIGHT;
}

.image {
  @mixin size(200px, 300px);
}

Mixinはクロスブラウザ問題を扱う場合に便利である。

@defmixin gradient(POS, HSL1, HSL2, HSL3, COLOR, FALLBACK_COLOR) {
  background-color: FALLBACK_COLOR; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR);               /* Chrome 10+,Safari 5.1+ */
  /* @alternate */ background-image: -moz-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* FF3.6+ */
  /* @alternate */ background-image: -ms-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR);  /* IE10 */
  /* @alternate */ background-image: -o-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR);   /* Opera 11.10+ */
}

.header {
  @mixin gradient(top, 0%, 50%, 70%, #cc0000, #f07575);
}

結果は下記になる。

.header {
  background-color: #f07575;
  background-image: -webkit-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
  background-image: -moz-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
  background-image: -ms-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
  background-image: -o-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
}

Closure Stylesheetsは複数のCSSファイルを一つに統合し、そのサイズを削減するために用いる事も出来る。Closure Stylesheetsは文法に関する静的なチェックを行い、左からの記述を右からの記述に変換（RTL反転）し、クラス名の変更を行う。

Closure ToolsはCompiler、Library、Templatesを含むユーティリティの集合で、2009年からGmail、Googleドキュメント、Googleマップで用いられている。これらが大規模なJavaScriptアプリケーションの開発を支援している。