Sassと仲良くお付き合い

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

Transcript

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

   View Slide

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

   View Slide

3. What’s Sass?
   

   View Slide

4. “Sass makes CSS fun again.
   

   View Slide

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

   View Slide

6. What’s Sass?
   

   View Slide

7. Sass is CSS Preprocessor.
   .scss .css
   

   View Slide

8. View Slide

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

   View Slide

10. http://jsdo.it/
    

    View Slide

11. http://codepen.io/
    

    View Slide

12. Future?
    

    View Slide

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

    View Slide

14. ϋΠϋΠᵇ ʅшʆ
    ᵃ
    

    View Slide

15. Demo
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. Sublime Text 2 + Emmet
    

    View Slide

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;
    }
    

    View Slide

21. .scss .css
    Valiables ม਺Λ࢖͏͜ͱ͕Ͱ͖Δ
    $secbottom: 30px;
    $basecolor: #cc0000;
    .block-a {
    background: $basecolor;
    margin-bottom: $secbottom;
    }
    .block-a {
    background: #cc0000;
    margin-bottom: 30px
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

26. .scss
    @import ෳ਺ͷTBTTϑΝΠϧΛDTTϑΝΠϧʹ݁߹͢Δ
    @import “common”;
    @import “reset”;
    @import “module”;
    style.scss
    _common.scss _reset.scss _module.scss style.css
    style.scss
    

    View Slide

27. Speed up?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. $ gem install compass
    

    View Slide

32. $ compass create folder_name
    

    View Slide

33. $ cd folder_name
    $ compass watch
    

    View Slide

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

    View Slide

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;
    

    View Slide

36. Sublime Text 2 + EmmetͰOK?
    

    View Slide

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;
    }
    

    View Slide

38. CSS Sprite DTTͱը૾ΛࣗಈͰ࡞ͬͯ͘ΕΔ
    

    View Slide

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

    View Slide

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

    View Slide

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);
    }
    

    View Slide

42. Attention!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. DBTF
    QW
    Q
    css
    _scss _common.scss
    _valiables.scss
    _module.scss
    style.css
    _spriteimage.scss
    style.scss
    ɾ
    ɾ
    ɾ
    αΠτͷ࿮૊Έ
    ม਺
    ύʔπ
    $44εϓϥΠτ
    ֤ίϯςϯπ༻
    

    View Slide

48. css
    _scss
    compass_start.bat
    config.rb
    μϒϧΫϦοΫͰ@TDTT؂ࢹ։࢝
    ઃఆϑΝΠϧ
    

    View Slide

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

    View Slide

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

    View Slide

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ͷԿߦ໨͔Λίϝϯτ͚ͭΔ
    

    View Slide

52. ๩͍͠ͷͰ୭͔ख఻ͬͯཉ͍͠ ʀЧʆ
    
    

    View Slide

53. DBTF
    QW
    Q
    css
    _scss _common.scss
    _company.scss
    style.css
    _price.scss
    style.scss
    ɾ
    ɾ
    ɾ
    _item.scss
    ҰͭͷDTTϑΝΠϧʹίϯύΠϧ͢ΔͷͰ
    ҧ͏TDTTϑΝΠϧΛෳ਺ਓͰ࡞ۀͯ͠΋େৎ෉
    style.css
    

    View Slide

54. css style.css
    4BTT࢖͑ͳ͍ਓ͸ී௨ʹDTTϑΝΠϧʹॻ͍ͯ΋Β͏
    
    
    

    View Slide

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

    View Slide

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

    View Slide

57. Conclusion.
    

    View Slide

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

    View Slide

59. Enjoy Coding!
    

    View Slide

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

    View Slide

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

    View Slide