第3回ゆるふわ勉強会

CSS拡張メタ言語のコトハジメ

第3回ゆるふわ勉強会

2012年6月のゆるふわ勉強会を行ったので、発表した概要とスライドをシェアします。今回はCSS拡張言語のコトハジメというタイトルでセッションを行いました。

第3回ゆるふわ勉強会

今回は第2回に参加していただいたみまさんをゲストに迎え、PhotoShop、Fireworks、CSS、jQuery、PHPとそれぞれについての発表となります。基本的には初めてのことを初めてなりに調べて初めてなりに発表してみた感じです。全体のスライド概要などはのちほど公式サイトにアップ予定ですので、こちらでは個人的な発表部分などを綴ります。

CSS拡張言語のコトハジメ

CSS拡張言語のコトハジメってことで、LESS、Sassの二つに焦点を絞った内容でお話しさせていただきました。スライドはほとんど言葉で補ってしまった部分があるので、不十分さはあるのですが、備忘録的に使えればなぁって感じです。

そもそもCSS拡張メタ言語って?

ざっくり言うと、「CSSをもっと便利にしたいけど、CSSだけじゃどうにもならないから、別言語で拡張できるようにして、CSSを生成しよう」っていうことです。

SassとLESS、そしてSCSS

別言語で」ってところで、SassはRuby、LESSはJavascriptで拡張されています。

Sass「Syntactically Awesome Style Sheet:かっこいい構文のスタイルシート」
LESSは英語直訳の意味としては「少ない」とかそんな感じなので、「シンプルかつ効率的に」

基本的な記述方法の違いに大きなものはないけど、SassとLESSで出来ることに違いがあるよって感じです。

SCSS

これ、よく別物扱いされるけど、同じ言語内の書き方の違いってやつです。
Sassのバージョン3.0以前は、Sass記法というインデントによる記法でしたが、3.0になってから、CSSに沿った記法のSCSS記法になりました。
なので、よく他のブログでSass(SCSS)って書いてあるのは、「SassのSCSS記法」だよって意味です。

出来ること

LESSとSassで出来ることとしては、変数、ネスト、関数、計算、ミックスイン。
このあたりの詳細は別途まとめたいところなんですが、個人的に注目してるのは、これ以外のインポート機能。

インポート機能なので、別の「.scss」ファイルや「.less」ファイルが読み込めるってことなのです。cssのインポート機能は結局のところ、すべて別ファイルになってましたが、読み込んだものをそのファイル内で展開するため、最終的なcssは一つになります。特にSassは圧縮もできるので、ファイルのサイズも小さくできます。

高速化が問われるサイトにとって、これは結構有用だと思います。変数用のファイル、ミックスイン用のファイルは別で用意しておいて、それらをまとめてインポートする管理ファイルを用意しておけば制作側はとても分かりやすい形でCSSを管理することができます。

導入するメリットとデメリット

メリット

  • CSSのコーディングを効率化できる
  • 統一化された記述によって可読性があがる
  • CSSファイルの分割によるデメリットが解消される

デメリット

  • メタ言語によっては環境構築が必要
  • チーム開発の場合、全員が記述方法を覚える必要がある
  • 今後どれが主要になるかわからない

メリットとしては、大筋は箇条書き通りです。前述したとおり、管理方法の効率化とコーディング自体の効率化が見込めます。
デメリットとしては、環境構築が必要な点、記述を覚えなければいけない点などありますが、最後の「どれが主要になるかわからない」これに尽きるきがします。

htmlの書き方も「html→xhtml→html5」で統合された通り、ブラウザ間の紛争的な感じでこの辺もそのうちまとまるのではないかなーとか勝手に思ってます。

クライアントに対しては?

上記までは、あくまで制作者目線なのですが、クライアントワークでいえば、制作物は納品物です。ということで、CSSファイルは納品するわけです。
LESSについては、コンパイルしてCSSにしたうえで納品してあげる必要があると思います。Javascript無効環境だとCSS適応されませんしね。

さらに、クライアントがWeb制作会社の場合、SassとかLESSとか知ってることもあります。
となると、lessファイルとかSassファイルも納品する可能性が出てきます。

というわけで、誰が見ても分かりやすいファイル構成とか書き方をしていけば、後々あわてなくてもいいし、引き継いだ側も安心できます。

結局どっちを使うのか?

で、自分はSassとLESSどっち使ってるの?って話なんですが、Sass+Compass使ってます。CSSでかつ圧縮版で出力できるので。この辺は好みだと思うので一通り使ってみてから判断するのがいいと思います。

「~~だから~~がいい」っていうのは使ってみた人の感想であって、使える可能性を狭める必要はないと思うので。

次回のお知らせ

7月15日(日)に第4回ゆるふわ勉強会の開催を予定しています。
テーマは、「WordPressのテーマ作成」ということで、開催予定です。
他セッションなど詳細がきまりましたら、公式サイトにて告知します。

ゆるふわ勉強会サイト

参加していただいた皆さんと、前回同様会場をお貸しいただいたGooyaさん有難うございました。そしてスタッフの方々お疲れ様でした。

トラックバック

TRACKBACK&PING

TrackBack URL :

コメントを残す

メールアドレスが公開されることはありません。