LESSは構文を学ぶだけでは意味がありません

allWebクリエイター塾（東京都）主催のマンスリー勉強会 SwapSkills Build にて、LESSの勉強会が、10月16日（水）20時00分から大槻社労士事務所（東京:銀座）で開催されます。

9月からシリーズとして開催されているLESS勉強会。10月は「グリットシステムをLESSで記述していきましょう」というテーマで開催いたします。

前回に引き続き今回も、gihyo.jpで「LESSで3倍ラクするスマートフォンコーディン」を連載している宇野雄氏をスピーカーとしてお迎えいたしました。

拡張言語を学ぶ際に書き方やお作法を学びますが、もともとCSSを理解している人からするとCSSでの記述に慣れている分、LESSを記述する際、書き方を覚えたところで一度CSSで記載したものをLESS化してしまう傾向にあるようです。

LESSやSaSSなどのメタ言語はCSSに展開前から記述できなければ意味がありません。

それらは、CSSのキチンとした設計がなければ効率的なLESSの記述ができないと言っても過言ではありません。

そこでシリーズ第2回目は「グリットシステムで作られたサイトをLESSで記述していきましょう」という内容でぼり下げていきます。概念や構文を学ぶことだけで終わらず、現場で利用できるノウハウを学ぶことができます。

グリットシステムとLESSの相性は抜群！

日本でグリットシステムというと、DTPでもおなじみのガイドを揃えることと考えてしまう傾向にありますが、グリットシステムとはサイトの構成をカラムとガータで計算したものを利用して作成します。

LESSは演算を利用することができるので、グリットシステムの計算値で求める方法に最適です。また、LESSで記述していればCSSにコンパイルした際に残らないコメント記述ができるため、どのような数値の設計でサイトを作っているのかが、後から読んでもわかります。

今更ですが、なぜLESSが便利なのか？

LESSは、変数、ネスト、ミックスインという方法で記述します。はじめて聞く言葉だとややこしく感じてしまいますが、同じ指定が多いCSSでは、できるだけ同じ指定をまとめながらも、変更できる（変更されるだろう）点を組み合わせることができるのでとても楽ちんです。

第1回目のLESSベーシックでは、この楽ちんになる記述方法を紹介させていただきました。第1回の様子を抜粋してYouTubeにあげていますのでよろしければご覧ください。

汎用テンプレートの限界と自分のテンプレート

Boilerplateなどの汎用テンプレートは比較的簡単にサイトを構築できるツールとして注目されています。ただ、どのサイトでも簡単に作れる様になっているためソースの無駄もでてしまうのが現状です。

その場合、自社オリジナルのテンプレートがあれば便利だと思いませんか？

作るサイトは似たようになる場合もあります。例えば、同じ幅、同じカラム数、サブカテゴリのサイズまで同じサイトを作りたいという場合もあるかもしれません。その場合、背景色やロゴ、ボタンなどのデザインだけが違っていたら、そこだけを変更してサイトを作ることができたら便利ですね。

このようにLESSをマスターすると自分オリジナルのテンプレートの実現ができるようになります。シリーズを通してテンプレート制作はもちろん、LESSの上手な組み方など現場でバリバリ利用できる構成をしています。

第2回目のグリットシステムをLESSで構築して自分のオリジナルテンプレートをいくつも作れる様にしましょう！