読者です 読者をやめる 読者になる 読者になる

エンジニアをリングする

プログラをミングしたり。

my web site twitter

DIST.2(Sass/Compass勉強会)に参加してきました

4/9: スライドが公開されたので追記しました。

Sass/Compass勉強会、DIST.2 Sassに参加してきました!
今回スタッフで受付を担当させていただきました〜。

普段行くプログラミングの勉強会とかだとあまり女性の方いらっしゃらないのですが、Sassなどフロントエンドの内容だとぐっと女性率が増えますね。
デザイナーさんも多く参加されていたようです。

私は前回の「Sass入門編」のセッション聞いてからCSSをSCSSで書くようになって記述効率がとても上がりました。(セレクタ入れ子にできるとコーディングのサクサク度が違います)
Compassはまだ使ったことなかったので、今回の「Compass入門編」楽しみでした!

前回のおさらい

第一回目だった前回は「Sass入門編」でした!
ふたつだけ抑えておきたい根本的なところ!

Sassって何?

SassはCSSを拡張したメタ言語です。
CSSにはない便利な機能を使ってコーディングし、CSSファイルにコンパイルできるようになっています。
便利な機能とはたとえばセレクタの入れ子、変数、関数、mixin、一行コメントなどなど

Ruby製なのでgem install sassでインストールします。

SassとSCSSって何が違うの?

Sassの書き方の中に、SASS記法というものとSCSS記法というものがあります。
代表的な違いのひとつとして、SASS記法は中カッコ{}を書かずにインデントでネストしていきます。
SCSS記法は中カッコを使うのでSASS記法よりもCSSに近い見た目です。
SASS記法で書いたファイルは.sass、SCSS記法で書いたファイルは.scssという拡張子になります。

その他内容については前回のスライドをごらんください!

今回の内容

今回は前回の続きである「Sass実践編」と、新たに「Compass入門編」の二本立てでした。

DIST.2 「Sass Again」での発表資料『Sass実践編+Compass入門』を公開しました - 448.jp blog

聞きながらメモしたものをまとめます!

Sass実践編

ほんとはCompass入門が先でSass実践編が後だったのですが、前回の続きの実践編ということでこちらを先にのせます。

パーシャル

importするSassファイル名の頭に_(アンダーバー)をつけると、そのSassファイルをCSSファイルにコンパイルしないでいてくれます。
これを使うことで読み込み専用のSassファイルが作れるので、Sassレベルでは機能単位でファイルを切り分けつつも最終的に書き出すCSSはひとつにまとめてリクエストを減らすことができます。

ソースマップによるデバッグ

Sassを使用してスタイルを記述しても最終的にブラウザが読み込むファイルはコンパイル後のCSSファイルになるので、デベロッパーツールで確認できる行番号やスタイル定義はコンパイル後のCSSの内容になってしまいます。
というわけでデバッグがやりづらい。
そこでSassファイルをコンパイルするとき、オプションに−−sourcemapを指定すると自動でソースマップファイル(filename.css.map)も出力してくれます。
このソースマップファイルがSassファイルとCSSファイルを対応付けてくれるので、ブラウザのコンソールで直接Sassファイルの内容を参照することができます。
デバッグがめっちゃ楽!!

もしうまく読み込めない場合は、コンソールの「Enable CSS source maps」がONになってるか確認してください。

mixin / extend / funtion の使い分けのコツ

  • 引数を使わない → extend
  • 引数を使うけどひとつのプロパティの定義でいい → function
  • 引数を使って複数のプロパティのスタイルを定義したい → mixin

なるほど!

Compass入門

Compassとは?

Compassは、Sassを使ったオープンソースCSSフレームワークです。
Compassを構成する要素のひとつとして、Sassの便利なmixinやユーティリティ集という面があります。
今回はその点についてのおはなし。

インストール方法

Rubyが入っている状態で、gem install compassでできます。
詳しくはスライドをごらんください!

使い方

Compass用のフォルダを作って、その中で下記コマンドを実行。(project_nameは任意で変更)
compass create project_name

このコマンドで、必要なフォルダやファイルが自動で作られます。

config.rbというファイルが設定ファイルになります。 sassのディレクトリパスや出力オプションを設定することができ、この設定ファイルを元にコンパイルされます。

コンパイルcompass compile

compassをインストールしていると、sass/scssファイルの中で@import 'compass/reset'のようなcompass始まりのパスをimportできるようになります。
そのsass/scssファイルをcompassコマンドでコンパイルすることでCompassを利用してCSSが書き出せるようになっています。
Compassを利用したsass/scssファイルを普通にsassコマンドでコンパイルしてもimportエラーになってしまいます。compassコマンドでコンパイルすることでcompassを使用してCSSが書き出されます。

Compassのコア機能

  • CSS3(一行で全ベンダープレフィックスを自動で出力など)
  • Helpers(便利な関数集。画像の幅サイズ取得、数値からコサイン取得など)
  • Layout(一行でIE6〜モダンブラウザまで対応できるCSSを書き出せる)
  • Reset(CSSリセット)
  • Typography
  • Utilities(新しいセレクタに未対応なレガシーブラウザの対応が簡単)
  • CSSスプライト用のclass・style・画像の自動生成(手動でつくるの辛いのでとてもオススメ)

詳しくは公式サイトのリファレンスで! http://compass-style.org/reference/compass/

ちょっとしたmixin集を使いたいだけなら、もっと軽いBourbonというフレームワークもおすすめだそうです。

以上

セッションの内容からかいつまんでメモでした。
Compass、Sassのmixin集というざっくりしたイメージしかなかったのですが、むしろその機能を使うだけだとオーバースペックなのかも。CSSスプライトの自動生成とかがとても強力だそうですね。
Sassのmixin集のBourbonというCSSフレームワークは初耳だったので興味深いです。

DISTのセッションはデモが多くて、実際に動いているところを見られるので会場で見るのがおすすめです。
あと特徴のひとつとして、発起人の沖さん(@448jp)はWindowsユーザーなのでセッションの内容もWindousユーザーに優しい内容になっています。
(Web系の勉強会でWindowsでのインストール方法をコマンドプロンプト操作しながら解説してくれるセッションは他にみたことない・・)
ちなみにおすすめのエディタはIntelliJ IDEAだそうです。

会場の写真のせたかったのに撮るの忘れてた。。。

フロントエンドな内容の勉強会はわりと少ない気がするのでおすすめです!