Successfully reported this slideshow.
Your SlideShare is downloading. ×

Sass less

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 26 Ad
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Similar to Sass less (19)

Advertisement

Sass less

  1. 1. Sass Less を使ってみて @kanayannet
  2. 2. Sass とは.. ・スタイルシートを簡潔に表現できる メタ言語 ・SassからCSSを生成するための ライブラリやコマンドラインツール
  3. 3. Lessとは.. ・スタイルシートを簡潔に表現できる メタ言語 ・LessからCSSを生成するための ライブラリやコマンドラインツール
  4. 4. ん?
  5. 5. 似てる!?
  6. 6. 概要を見ただけだと、違いがよく解らないの で、自分で実際に使ってみて、どう違ったの かを話します。 ※どちらかというと、初心者向けの話だと 思います
  7. 7. 1. Syntax 2. 機能 3. install + 実行 4. ネット上の噂話の真偽
  8. 8. Syntax Sass ->
  9. 9. Syntax Less ->
  10. 10. 機能 Sass ミックスイン ->
  11. 11. 機能 Less ミックスイン ->
  12. 12. 機能 Sass 計算式 ->
  13. 13. 機能 Less 計算式 ->
  14. 14. 機能 Sass extend ->
  15. 15. install Sass rubygems gem install sass
  16. 16. install Less npm(node.js) npm install less
  17. 17. 実行(簡易実行) Sass sass file.sass:file.css
  18. 18. 実行(簡易実行) Less lessc file.less > file.css
  19. 19. ネット上の噂話の真偽 - less の方がコンパイルが楽? - less の方が学習コスト低い? - less は extend がない? - sass の方がコード量が少ない
  20. 20. Q. less の方がコンパイルが楽? A. もしかしたら、client サイド(javascript) で動的にコンパイルの事かも? (コマンド打つ 必要ないし...) ※javascript 実行出来ない環境だと CSS定義 されずにデザイン壊れる可能性あるので注意
  21. 21. Q. less は extend がない? A. 標準機能(本家)だとないです。 ※作っている人はいるみたいなので、 いずれ本家に merge されるかも? https://github.com/cloudhead/less.js/pull/509
  22. 22. Q. less の方が学習コスト低い? A. うーん...どうなんだろ? より CSS の構文に近いからかも? ※自分は Haml をやっていたので インデントの構文になれていただけ?
  23. 23. Q. sass の方がコード量が少ない A. 今のところそう感じます。 ※スコープ {} や ; がいらない。 標準でextend が使えるので効率よい
  24. 24. まとめ どちらかが、極端に良いというのは 無さそうなので、やりやすい方で 良いかと... ※css -> 変換する機能もあるよ $sass-convert $css2less(gem install css2less)
  25. 25. まとめ Bootstrap や Ruby on rails などの フレームワーク との相性もあるので 開発環境により向いているものを選択 するのも手かと思います。
  26. 26. ご清聴ありがとうございました

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×