BT

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

| 作者: Abel Avram フォローする 11 人のフォロワー , 翻訳者 福田 寅成 フォローする 0 人のフォロワー 投稿日 2011年11月24日. 推定読書時間: 5 分 |

原文(投稿日: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はCompilerLibraryTemplatesを含むユーティリティの集合で、2009年からGmail、Googleドキュメント、Googleマップで用いられている。これらが大規模なJavaScriptアプリケーションの開発を支援している。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT