1. Sass Less を使ってみて
@kanayannet

2. Sass とは..
・スタイルシートを簡潔に表現できる
メタ言語
・SassからCSSを生成するための
ライブラリやコマンドラインツール

3. Lessとは..
・スタイルシートを簡潔に表現できる
メタ言語
・LessからCSSを生成するための
ライブラリやコマンドラインツール

4. ん？

5. 似てる！？

6. 概要を見ただけだと、違いがよく解らないの
で、自分で実際に使ってみて、どう違ったの
かを話します。
※どちらかというと、初心者向けの話だと
思います

7. 1. Syntax
2. 機能
3. install + 実行
4. ネット上の噂話の真偽

8. Syntax
Sass
->

9. Syntax
Less
->

10. 機能
Sass
ミックスイン
->

11. 機能
Less
ミックスイン
->

12. 機能
Sass
計算式
->

13. 機能
Less
計算式
->

14. 機能
Sass
extend
->

15. install
Sass
rubygems
gem install sass

16. install
Less
npm(node.js)
npm install less

17. 実行(簡易実行)
Sass
sass file.sass:file.css

18. 実行(簡易実行)
Less
lessc file.less > file.css

19. ネット上の噂話の真偽
- less の方がコンパイルが楽?
- less の方が学習コスト低い?
- less は extend がない?
- sass の方がコード量が少ない

20. Q. less の方がコンパイルが楽?
A. もしかしたら、client サイド(javascript)
で動的にコンパイルの事かも？
(コマンド打つ 必要ないし...)
※javascript 実行出来ない環境だと CSS定義
されずにデザイン壊れる可能性あるので注意

21. Q. less は extend がない?
A. 標準機能(本家)だとないです。
※作っている人はいるみたいなので、
いずれ本家に merge されるかも?
https://github.com/cloudhead/less.js/pull/509

22. Q. less の方が学習コスト低い?
A. うーん...どうなんだろ？
より CSS の構文に近いからかも?
※自分は Haml をやっていたので
インデントの構文になれていただけ？

23. Q. sass の方がコード量が少ない
A. 今のところそう感じます。
※スコープ {} や ; がいらない。
標準でextend が使えるので効率よい

24. まとめ
どちらかが、極端に良いというのは
無さそうなので、やりやすい方で
良いかと...
※css -> 変換する機能もあるよ
$sass-convert
$css2less(gem install css2less)

25. まとめ
Bootstrap や Ruby on rails などの
フレームワーク との相性もあるので
開発環境により向いているものを選択
するのも手かと思います。

26. ご清聴ありがとうございました