先日、旧友と久々に会ってご飯を食べながら話した結果、LESSを使うのをやめ、Sassに移行することにしました。

そして、それから1週間後、勉強会を開くまでの話です。

LESSとかSassとか

どちらも、CSSメタ言語であり、CSSの記述をプログラムのように拡張して書くことで、ソースを綺麗にわかりやすくすることで可読性を高めたり、記述の速度を劇的に上げることができる素敵なものです。

CSSメタ言語でできること

例えばSassで


@mixin bgRed {

background-color:#ff0000;

}

#caution{

@include bgRed;

}

こんな感じで書いてCSSに書き出すと、、、


#caution{
background-color:#ff0000;
}

こんな感じになります。
つまり、いわゆるプログラミングの変数みたいな感じで色やらプロパティやらを管理できたりするので、非常に便利なんです。

他にも、関数を定義して、引数を渡すような書き方だったり、使えるようになると、CSSの高速コーディングとメンテナンス工数を削減できるわけですね！

詳細な解説はいろんなブログにあったりするのでとりあえず割愛しちゃいます。

LESSを使っていた理由

LESSとSassはどちらも同じくらいメジャーなんじゃないかなあとは思います。

が、LESSはjsファイルを使ってレンダリングなしで動かせたり（本番では基本的にコンパイルしますけど。）、導入が簡単だったのが一番でした。

Sassだと、黒い画面を使わないと導入できなかったりすることもあり、ハードルが高かったのもありましたが。

特に何も考えずに、でも少し興奮しながらLESSを使っていました。

Sassに移行を決意したきっかけ

友人とはもうかれこれ10年以上の付き合いでもあり、その昔一緒にWEB界隈のビジネスのまね事みたいなことをやる機会もあったことから、お互いのキャリアプラン的なこととかを話す傍ら、技術的な話をしたりするような付き合いでした。

ここしばらく会うことはなくても、なんだかんだでそこそこ盛り上がり、

「CSSのメタ言語とか何使ってるの？」

「LESSだよー。」

「Sassにしろよ！」

すごく端折りましたが、こんな会話になったわけです。

彼はRuby使いなので、相性が良いだけという事も想定したのですが、彼があまりにも褒めていたので、どんなものか改めて調べてみました。

改めて調べたらSassがすごかった

  • 条件分岐とか使える！
  • 演算がLESSより強い！
  • プロパティが入れ子にできる！
  • Compassとセットで使えば、勝手にCSSにコンパイルされる！
  • Compassとセットで使えば、CSSスプライト用画像とCSSも一瞬で作れる！
  • Macなら最初からRuby入ってるし、黒い画面に4行くらい書くだけで導入できる！

などなど、なんだかすごく魅力的に見えて、すぐに「とりあえず使ってみる」ことにしたのです。

導入から勉強会開催まで

Facebookで別の友人のアドバイスもあり、なんとか導入には成功しましたが、実際の運用例などはあまり詳しくはわからないままだったりしました。

そんな折、旧友のTwitterを見ると・・・

というわけで、通勤電車の中Facebookで「やってくれるなら行く！」と返信。

「セッティングしてくれるならネタ出す！」とのことなので、速攻場所を手配し、2時間後には勉強会の開催が決定しました。

下北沢オープンソースCafeさんは激アツでした

諸々の都合から、場所を小田急沿線、日程が20日土曜日と決めたところで、下北沢オープンソースカフェさんに電話。

「勉強会を開こうと思いまして、最低2人、多くても5人前後だと思うんですけど。。。」

「大丈夫です！どんな内容ですか？」

「Sassの導入とか設定まわりのことを、セミナー形式でやりつつ懇親会みたいな感じでやりたいです！」

「Sass？CSSのですか？いいじゃないですかー！」

くらいなテンションで、前の勉強会が終わったあとの時間をあっさりおさえてもらいました。

開催日3日前なのに。

その後、途中まで設定していたFacebookイベントページを原稿にする形で、新規にイベントページを作って頂いたのですが、仮当てしてたアイキャッチ、ちゃんとしたの作ってくれてるじゃないっすか！

と、いうわけで、本当の初心者の僕にでもわかる、初心者のためのSass+Compass勉強会を、急ですが今週土曜日、4月20日、下北沢オープンソースカフェにて開催します。

興味を持っていただけた方はぜひともご参加くださいませ！

当日の参加費用はオープンソースカフェさんのチャージ代1日1000円のみです。

いろいろなブログを見ながらやって挫折した人、これからCSSを効率的に書きたい人、などなどよろしければ。

Macを持ってくれば設定なんかもその場でアドバイスもらえるかもです！