Pro Yearly is on sale from $80 to $50! »

Sassと仲良くお付き合い

 Sassと仲良くお付き合い

2013年5月18日に開催された WCAF Vol.10 でのスライドです

Abebddb79fcf66d49191fed9332039e7?s=128

Toshiaki Sasaki

May 18, 2013
Tweet

Transcript

  1. 4BTTͱ ஥ྑ͘ ͓෇͖߹͍ 2013.05.18ɹWCAF Vol.10 Toshiaki Sasaki (Web Designer at

    ALLCONNECT,Inc.)
  2. Toshiaki Sasaki Web Designer at ALLCONNECT.Inc. @shirokuro331

  3. What’s Sass?

  4. “Sass makes CSS fun again.

  5. 1. Sass 2. Compass 3. Case of Sass 4. Conclusion

    AGENDA
  6. What’s Sass?

  7. Sass is CSS Preprocessor. .scss .css

  8. None
  9. http://sass-lang.com/

  10. http://jsdo.it/

  11. http://codepen.io/

  12. Future?

  13. 4BTT $441SFQSPDFTTPS ɺ͍ͭ࢖͏ͷʁ

  14. ϋΠϋΠᵇ ʅшʆ ᵃ

  15. Demo

  16. $ gem install sass $ sass --watch scss:css

  17. http://mhs.github.io/scout-app/

  18. http://incident57.com/codekit/

  19. Sublime Text 2 + Emmet

  20. .scss .css Nesting ೖΕࢠͰ$44Λॻ͚Δ #header { width: 960px; margin: 0

    auto; padding: 0; .contact { float: right; p { margin-bottom: 20px; } } } #header { width: 960px; margin: 0 auto; padding: 0; } #header .contact { float: right; } #header .contact p { margin-bottom: 20px; }
  21. .scss .css Valiables ม਺Λ࢖͏͜ͱ͕Ͱ͖Δ $secbottom: 30px; $basecolor: #cc0000; .block-a {

    background: $basecolor; margin-bottom: $secbottom; } .block-a { background: #cc0000; margin-bottom: 30px }
  22. .scss .css mixin $44ͷ·ͱ·ΓΛม਺Έ͍ͨʹ͢Δ @mixin sprite { display: block; text-indent:

    -9999px; } @mixin sectionWidth($dist) { width: $dist; margin: 0 auto; } .btn { @include sprite; } .btn { @include sectionWidth(960px); } .btn { display: block; text-indent: -9999px; } .btn { width: 960px; margin: 0 auto; }
  23. .scss .css extend ηϨΫλΛ࠶ར༻Ͱ͖Δ %clearfix { overflow: hidden; *zoom: 1;

    } #header { @extend: %clearfix; width: 980px; } #footer { @extend: %clearfix; width: 700px; } #header, #footer { overflow: hidden; *zoom: 1; } #header { width: 980px; } #footer { width: 700px; }
  24. .scss .css darken ৭Λ҉͘͢Δ $basecolor: #eee; .block-a { width: 100px;

    height: 100px; background: $basecolor; } .block-b { width: 100px; height: 100px; background: darken($basecolor, 30%); } .block-a { width: 100px; height: 100px; background: #eeeeee; } .block-b { width: 100px; height: 100px; background: #a2a2a2; }
  25. .scss .css lighten ৭Λ໌Δ͘͢Δ $basecolor: #990000; .block-a { width: 100px;

    height: 100px; background: $basecolor; } .block-b { width: 100px; height: 100px; background: lighten($basecolor, 30%); } .block-a { width: 100px; height: 100px; background: #990000; } .block-b { width: 100px; height: 100px; background: #ff3333; }
  26. .scss @import ෳ਺ͷTBTTϑΝΠϧΛDTTϑΝΠϧʹ݁߹͢Δ @import “common”; @import “reset”; @import “module”; style.scss

    _common.scss _reset.scss _module.scss style.css style.scss
  27. Speed up?

  28. ܶతʹ࡞ۀεϐʔυ͕͔͋ͬͨͱ͍͏ͱͦ͏Ͱ΋ͳ͍ ࡞ۀεϐʔυͱ͍͏ΑΓɺޮ཰ԽΛҙࣝ͢ΔΑ͏ʹ %3:ͳઃܭΛߟ͑ΔΑ͏ʹͳͬͨ %3:ɾɾɾ%PO`U3FQFBU:PVSTFMG

  29. ݁࿦4BTT࢖͑ΔΑ͏ʹͳͬͯ࡞ۀޮ཰͸্͕ͬͨ

  30. http://compass-style.org/

  31. $ gem install compass

  32. $ compass create folder_name

  33. $ cd folder_name $ compass watch

  34. .scss .css mixin ͋Β͔͡ΊNJYJO͕ͨ͘͞Μ༻ҙ͞Ε͍ͯΔ @import “compass/utilities/ general/clearfix”; .block { @include

    clearfix; } .block { overflow: hidden; *zoom: 1; }
  35. .scss .css mixin ͋Β͔͡ΊNJYJO͕ͨ͘͞Μ༻ҙ͞Ε͍ͯΔ @import “compass/css3”; .block-a { @include border-radius(10px);

    } .block-b { @include box-shadow(#c00 3px 3px 10px); } .block-a { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .block-b { -webkit-box-shadow: #cc0000 3px 3px 10px; -moz-box-shadow: #cc0000 3px 3px 10px; box-shadow: #cc0000 3px 3px 10px;
  36. Sublime Text 2 + EmmetͰOK?

  37. .scss .css CSS Sprite DTTͱը૾ΛࣗಈͰ࡞ͬͯ͘ΕΔ @import “icons/.png”; @include all-icons-sprite; //

    img/icons ʹΞΠίϯը૾ // config.rb ͷը૾ύεઃఆ͸ ɹɹimages_dir = "img" .icons-sprite, .icons-download, .icons-cloud { background: url(‘../img/icons- scb48544681.png’) no-repeat; } .icons-sprite { background-position: 0 32px; } .icons-download { background-position: 0 64px; } .icons-cloud { background-position: 0 96px; }
  38. CSS Sprite DTTͱը૾ΛࣗಈͰ࡞ͬͯ͘ΕΔ

  39. .scss .css image-width ը૾ͷύε͔Β෯αΠζΛऔಘ͢Δ .icon { width: image-width(“path”); } .icon

    { width: 32px; }
  40. .scss .css image-height ը૾ͷύε͔Βߴ͞αΠζΛऔಘ͢Δ .icon { height: image-height(“path”); } .icon

    { height: 32px; }
  41. .scss CSS sprite + image-width,height $icon: sprite-map(“path”, $spacing: 5px); @mixin

    sprite { display: block; text-indent: -9999px; } .icon-cloud { @include sprite; width: image-width(sprite-file($icon, imagename)); height: image-height(sprite-file($icon, imagename)); background-image: $icon; background-position: sprite-position($icon, imagename); }
  42. Attention!

  43. ෳ਺ਓͰͭͷϓϩδΣΫτͷ੍࡞Λߦ͏৔߹ɺ ͦͷਓ΋$PNQBTTʹ͍ͭͯͷཧղ͕ඞཁ ࢲ΋Ұ౓࠳ંͯ͠·͢ ձࣾͱ͔Ͱ࢖͏৔߹ɺগͮͭ͠ಋೖ͕٢͔ͳͱࢥ͏

  44. ݁࿦ͳΜʹͤΑ$PNQBTTศརʂ

  45. ͱ͋ΔձࣾͰͷ4BTTͱͷ͓෇͖߹͍ํ

  46. ϑΥϧμϑΝΠϧͷߏ੒͸ʁ

  47. DBTF QW Q css _scss _common.scss _valiables.scss _module.scss style.css _spriteimage.scss

    style.scss ɾ ɾ ɾ αΠτͷ࿮૊Έ ม਺ ύʔπ $44εϓϥΠτ ֤ίϯςϯπ༻
  48. css _scss compass_start.bat config.rb μϒϧΫϦοΫͰ@TDTT؂ࢹ։࢝ ઃఆϑΝΠϧ

  49. css _scss compass_start.bat config.rb μϒϧΫϦοΫͰ@TDTT؂ࢹ։࢝ ઃఆϑΝΠϧ ͜ͷͭͷϑΝΠϧ͕͋Ε͹ίϚϯυೖྗ͠ͳͯ͘΋ TBTTͷ؂ࢹฤू͕Մೳ

  50. compass_start.bat(.command) compass watch #!/bin/bash htdocs=$(dirname $0) cd $htdocs compass watch

    Windows Mac
  51. config.rb http_path = "/" css_dir = "css" sass_dir = "_scss"

    images_dir = "img" javascripts_dir = "js" output_style = :nested relative_assets = true line_comments = false DTTͷϑΥϧμ໊ TBTTͷϑΥϧμ໊ ը૾ͷϑΥϧμ໊ +BWB4DSJQUͷϑΥϧμ໊ DTTͷग़ྗܗࣜ ૬ରύεʢTQSJUFͷͨΊʹඞཁʣ TDTTͷԿߦ໨͔Λίϝϯτ͚ͭΔ
  52. ๩͍͠ͷͰ୭͔ख఻ͬͯཉ͍͠ ʀЧʆ

  53. DBTF QW Q css _scss _common.scss _company.scss style.css _price.scss style.scss

    ɾ ɾ ɾ _item.scss ҰͭͷDTTϑΝΠϧʹίϯύΠϧ͢ΔͷͰ ҧ͏TDTTϑΝΠϧΛෳ਺ਓͰ࡞ۀͯ͠΋େৎ෉ style.css
  54. css style.css 4BTT࢖͑ͳ͍ਓ͸ී௨ʹDTTϑΝΠϧʹॻ͍ͯ΋Β͏ <link rel=”stylesheet” href=”css/style.css” /> <link rel=”stylesheet” href=”css/newcontent.css”

    />
  55. ձࣾʢνʔϜʣͰͷಋೖ

  56. উखʹ΍ͬͨࣗ෼Ͱ཰ઌͯ͠΍Δ ୭͔Λר͖ࠐΉ ษڧձ͢Δ ֤ࣗͷϚγϯʹڧ੍తʹ4BTT$PNQBTTೖΕΔ DPOpHSCͱόονϑΝΠϧ༻ҙ͢Δ

  57. Conclusion.

  58. 4BTT ʢ$44ϓϦϓϩηοαʣ Ͱޮ཰తͳ։ൃ $PNQBTTศརʂ্खʹ͓෇͖߹͍͠·͠ΐ͏ ࠷ॳ͸೉͘͠ࢥ͏͔΋͚ͩͲ׳ΕΔͱϠϛπΩʹ ࠇ͍ը໘΄ͱΜͲ࢖Θͳͯ͘΋4BTT͸࢖͑Δ Ͱ΋ࠇ͍ը໘ʹ΋׳ΕΑ͏

  59. Enjoy Coding!

  60. Thank you WCAF Vol.10 ʮWeb Designing for the Futureʯ @shirokuro331

  61. IUUQDTTIBQQZMJGFDPNBSDIJWFT@QIQ ʲ4BTTΛ֮͑Α͏ʂʳ΋͘͡తͳͷͱࢀߟϦϯΫc$44)BQQZ-JGF $PNQBTTΛ࢖ͬͯ4BTTͷ$44ग़ྗΛखܰʹ͠Α͏c4LZXBSE%FTJHO Resources IUUQXXXTLZXBSEEFTJHOOFUCMPHBSDIJWFTIUNM Photo Credit -VD7JBUPVS IUUQXXXMVDOJYCFNBJOQIQ