尝贰厂厂使ってますか？
- 1. 尝贰厂厂使ってますか？ ㈱シーエー?アドバンス 仲里 淳矢
- 2. アジェンダ ①尝贰厂厂の绍介 ②導入方法 ③使い方
- 3. ①尝贰厂厂の绍介
- 4. はじめに ? 最近、CSSメタ言語LESSとかSassとかいろい ろ流行ってるよね！ ? でも、既存のシステムがあると、なかなか使う 機会がない。。。 ? けど、新規立ち上げとかで、使うかもしれない ので、勉強しとこ！ってことで、スライドにまと めてみました。
- 5. LESSってなぁに？ ? CSSを記述するためのメタ言語 ? カラーコードとかを変数で持てる – e.g. @mycolor: #C0FFEE; ? ロジカルな記述ができる – 関数、入れ子、数値計算等 ? Node.jsのexpressやTwitter Bootstrapが採用 ? 競合 – Sass, Stylus, Tass など
- 6. ③导入方法
- 7. インストール方法と使い方 ～その①～ ※前提として、Rubyの開発環境が構築されていること！ # インストールコマンド % gem install less # コンパイルコマンド % lessc example.less > example.css あとは、出力したCSSを設置するだけ！
- 8. インストール方法と使い方 ～その②～ ※『less.js』を保存した後、 # wget http://cloud.github.com/downloads/cloudhead/less.js/less-1.3.1.min.js # ln –s less-1.3.1.min.js less.js htmlファイル側で、『less.js』 と 『*.less』 と読み込み！
- 9. ③使い方
- 10. 変数 について ? カラーコードやサイズを同じ値で統一したい時ってありますよね。 そういうとき、変数で定義しておくと便利！ ? コードが少なくなって、生産性が向上するし、サイトの統一感も出 しやすいですよね！
- 11. Mixin について ? 同じ処理を繰り返し書きたくない時ってありますよね？ ? そういうときは、下記のようにMixinを使いましょう。 – まあ、Mixinは関数みたいなものです 丸っこい区切りが作り放題！
- 12. Mixin について ? セパレータ用のMixinを作ったり、テキストシャドウを定義しておけ ば、资产として、使いまわせますよね！
- 13. 入れ子（ネスト） について ? 構造化されたレイアウトを表現するには、LESS はうって つけです！とりあえず、以下を見ていただければ、わかる かと思います。 ? CSSの冗長な書き方が、すっきりしてますよね！？
- 15. Color funcｔions ? 定義した色に対して、割合で色を変更する関数です！ ? 整数スケールで色の明暗を変更したり、アルファかけたり できます。
- 16. まとめ ? LESSを使用することにより、CSSを組む時、変数が 使えたり、関数が組めたりといいことずくめ！ ? 変数や関数が作れるので、特定のデザインを資産 として、プログラマブルに残すことができる！ ? あと、流行ってるので、抑えておこうね?
- 17. 参考 ? LESS ? The Dynamic Stylesheet language – http://lesscss.org/ ? CSSをシンプルに書くことができるLESS使ってみた | webOpixel – http://www.webopixel.net/html-css/503.html ? LESS初心者向けのナニカ – Archiva – http://archiva.jp/web/html-css/less_started.html
- 18. 謝辞 ? こちら、背景画像で使用させていただきました ? Subtle Patterns – Creative Commons Attribution-ShareAlike 3.0 Unported License – http://subtlepatterns.com/