こんにちは、
id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。
アジェンダ
- どんなものがあるか
- 導入の背景と目的
- はてなでの選択
- 何がやれるか
- どう使うか
- 事例・実演
- 運用ルール
- 今後の展望
どんなものがあるか
導入の背景
前提条件
デザイナー目線での導入導入の目的
以下のような仮説が考えられる仮説
はてなでの選択
どれを選ぶかは、組織体制、開発環境、仕事分担など状況において変わってくると考える。Less
- CSSに近い記述ルール
- 特別な環境構築の必要がない。導入が楽
- 導入・撤退が比較的楽に思える
- 厳密な書き方をする必要がない
- 接頭子などsassより少ない
- mixin, extendの選択を考えなくてすむ。もちろんデメリットもあるが。
- Twitter Bootstrapなど比較的大規模なフレームワークにも採用されてる
- シンプルで導入が現実的なライブラリもある
- 詳しくは後述
何がやれるか
代表的なものを実践を踏まえ紹介- Nesting
- Variables
- Mixins
- Color functions
Nesting
.section {
img {
border: 0;
&.profile-image {
float: left;
width: 32px;
// 以下解説
#nav & {
float: none;
width: 16px;
vertical-align: middle;
}
}
}
}
Variables
@link : #000666;
@vlink : #0000ff;
@margin: 10px;
@domain: "http://www.hatena.ne.jp/images/";
a {
color: @link;
&:visited {
color: @vlink;
// 要注意
background: url("@{domain}icon.gif") 0 50% no-repeat;
}
}
div {
margin:@margin;
&.long {
margin:@margin * 2;
}
}
Mixins
.border-radius (@radius: 3px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
-ms-border-radius: @radius;
}
.button {
.border-radius;
&.large {
.border-radius(10px);
}
}
Color functions
実践向きではないが、参考まで@color: #5279e7;
@link : @color;
@vlink: lighten(@color, 10%);
@alink: darken(@color, 10%);
.more {
a {
color: @link;
&:visited {
color: @vlink;
}
&:active {
color: @alink
}
}
}
その他色々...
詳しい事はhttp://lesscss.org/などを読んでください。
Compile
.less → .css手段の選択
すぐに導入させられる- 基本的にCompilerアプリ（今すぐに導入可能）
- コンパイル時間は体感的にはほとんど意識しないですむ。（5000行程度までテスト）
- 今後の検証しだいでコマンドライン
- まだ未検証
- 要開発
補足
- これまで通りの開発手段が使える
- テスト環境と本番環境での変更が不要
- jsを使った場合いくつかの問題が確認されている
- ローカル開発の際とかなんか面倒そう。自分でやってみたけどChromeうまくいかず
- allow-file-access-from-filesのパラメータを渡して起動？
- 参考：LESS初心者向けのナニカ - Archiva
- ローカル開発の際とかなんか面倒そう。自分でやってみたけどChromeうまくいかず
- 参考：LESS - CSSプリプロフェッサ | CSS Radar | Mini Books For Front End Developers
- Lessの基本等実践向きでよい情報がまとまっていますので一読をオススメします。
実例紹介
いくつかのサービスにおいて早速導入し、デザイナー3人による運用を開始している状況を紹介project
lessの機能が複数あることと、ファイルが長くなってきた場合の可読性を考え、ある程度の細分化させ新たな機能導入も行いやすくしているstatic |-less/ | `-project.less | |-_variable.less | |-_mixin.less | |-_layout.less | |-_common.less | |-_core.less | |-_theme.less | |-_permalink.less (page) | `-_guest.less (page) |-css/ | `-project.css
- service-name.less
- 親のLess。"_"付のLessファイルを@importさせて結果的にはalbum.cssという1つのCSSファイルに結合してコンパイルしています。その為、コンパイルするのはこのファイル1つ
- _variable.less
- 変数定義用。現状は基本カラーと、背景に使う画像のpathの管理をしています
- _mixin.less
- mixin用です。ベンダープレフィックスが必要なもの、clearfixなど基本的なものやボタンパーツなど。基本的なものについては全社共通で使えそうなパーツが多い
- _layout.less
- 大まかな骨組みの部分だけこっちで定義させてます。サイドバーの幅を変えたりレイアウト調整する場合、楽になります
- _common.less
- bodyやanchorなど基本的な指定やResetになります
- _core.less
- 一番いじってるLess。ここから他のLessファイルに分散できるものを吟味している状況で現在はtemp的な役割
- _theme.less
- テーマが絡むサービスな為、_coreに書かれた内容を打ち消す為に用いています
- _permalink.less, _guest.less
- ページ単位で比較的大きく独自のスタイルの定義が入る場合はページ毎にLessを作ってみています
one
static |-less/ | `-portal-one-top.less | `-one.less | |-_variable.less | |-_mixin.less | |-_common.less | `-_display_none.less |-css/ | |-portal-one-top.css → ポータルトップに利用 | `-one.css → one全体に利用Less導入前は以下のようなhtmlに併記する書き方をしていたが、Lessによるimportが吸収可能な為、portal-top-one.cssのみを出力することも可能になった
<link type="text/css" rel="stylesheet" href="/css/one.css"> <link type="text/css" rel="stylesheet" href="/css/portal-top-one.css">複数サービス運用してみて感じたのは_mixinは似たファイルになる部分も大きいので、共通化やsnippetのシェアを念頭に入れる必要あり。
導入ライブデモ
ちょっといじってみます厄介な点・注意点
現状での運用ルール案
以上の内容を踏まえ運用ルールを提案します- 導入は必須ではないが、アクティブなサービスは順次移行推奨
- プロジェクトによってless,css両方書く事を避けたい
- 導入する場合はLessを使いましょう
- ファイルはできる限りわかりやすく分割しましょう
- 各プロジェクトのLessの具体的な運用方法はまずはお任せ。みんなでノウハウの蓄積を。
- 命名規則。templates同様importファイルは「_」をつけるなどして視覚的にわかりやすく
- Compilerは指定した物を利用する
- less.app, Winless
将来的な展望
ライブラリの導入
まずは自社のノウハウを貯める段階だと思いますが現状の候補としてPreboot.less
- 様々なMixinが収められているライブラリ
- http://markdotto.com/bootstrap/
Less Elements
- 上記同様のライブラリ。癖がなくコンパクトなので採用しやすそう
- http://lesselements.com/
Twitter Bootstrap
- 規模が大きくライブラリとしては不向き。運用・拡張していくにあたって構造の参考にはなる
- http://twitter.github.com/bootstrap/
Hatena.lessの導入案
はてな全体で使われる標準的lessファイルの導入によりサービス全体の統一感やサービス側での負担を軽減させる目的を果たすと考える。現在定めているガイドラインをソースコードに落とし込んでシェアさせる事でルールの運用がより強力になるHatena
`-Hatena.less ------------------------Hatena-Project1/
|-_Hatena_variables.less ---| | `-project.less
|-_Hatena_mixin.less ---| | |-_variable.less
|-_Hatena_layout.less ---| | |-_mixin.less
`-_library.less（外部？）---| | `-_core.less
|
|-Hatena-Project2/
| `-project.less
| |-_variable.less
| |-_mixin.less
| |-_layout.less
| `-_core.less
|
|-Hatena-Project3/
`-project.less
|-_variable.less
|-_mixin.less
|-_common.less
`-_core.less
今後の運用について
- チーム間（デザイナー、エンジニア、ディレクター）での使用感をシェア
デザイン会
- 運用状況、TIPSのシェア
- Lessを導入した事が本当に正しかったのかの仮説の検証
- mixin snippetをシェアしつつ、library、Hatena.lessの必要性を検討
