Sass less

1,100 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,100
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \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
  • 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. Syntax2. 機能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. ご清聴ありがとうございました

    ×