第2回 Sass勉強会 in 社内

社内のデザイナー向けに発表したものです。
第1回はスライドなし

Transcript

1. ୈ2ճ Sassษڧձ 2013/7/31 ࣾ಺ษڧձɹ
2. લճͷ͓͞Β͍ SCSSͷॻ͖ํ ม਺ɾσʔλܕ ਺஋ԋࢉͱจࣈྻૢ࡞ mixinͷॻ͖ํ
3. "## scss/! $## app.scss! $## _base.scss! $## _variables.scss! $## _mixin.scss! "## module/! $## _buttons.scss! $## _lists.scss! $## _texts.scss! "## _utils.scss! ! SCSSͷॻ͖ํ app.scss! /* ͜͜Ͱ৭ʑಡΈࠐΉ */! ! // import global variables! @import "variables"! ! // import global mixins! @import "mixin"! ! // import modules! @import "module/buttons"! @import "module/lists"! @import "module/texts"! @import "module/utils"! ! // import base style! @import "base"! /* CSSʹॻ͖ग़͞ΕΔ */ // CSSʹॻ͖ग़͞Εͳ͍ |! |! |! |! |! |! |! |! |! |! "## css/! "## app.css
4. ม਺ɾσʔλܕ $ม਺໊: ஋; ޷͖ͳ΋ͷΛೖΕ͓͚ͯΔശ
5. ม਺ɾσʔλܕ // จࣈྻ! $string1: abc;! $string2: "abc";! ! // ਺஋! $number: 123;! ! // Χϥʔίʔυ! $color: #fff;! ! // ਅِ஋! $boolean: true;! ! // null! $null: null;! ! // Ϧετ! $list-space: 0 auto 10px;! $list-comma: "hoge", "fuga", "piyo";
6. ਺஋ԋࢉͱจࣈྻૢ࡞ $outer-width: 100px;! $inner-width: 80px;! ! .foo {! width: $inner-width + 10;! padding: ($outer-width - $innerwidth) / 2;! }! ! .bar {! width: $outer-width * 3;! }! ! .error {! font-size: 10px + 1.2em; // => error!! } ԋࢉࢠ(+ - * /)ͷલޙ͸ ൒֯εϖʔεΛۭ͚Δͱ٢ আࢉه߸(/)͸ CSSͷจ๏ʹ΋͋ΔͷͰ஫ҙ
7. ਺஋ԋࢉͱจࣈྻૢ࡞ $titles: 'hoge', 'fuga', 'piyo';! $height: 46px;! $counter: 0;! ! @each $label in $titles {! .title-#{$label} {! background-position: 50% $height * $counter;! }! $counter: $counter - 1;! }
8. ਺஋ԋࢉͱจࣈྻૢ࡞ .title-hoge {! background-position: 50% 0px;! }! ! .title-fuga {! background-position: 50% -46px;! }! ! .title-piyo {! background-position: 50% -92px;! }
9. mixinͷॻ͖ํ // Ҿ਺ͳ͠! @mixin no-text-size-adjust {! -webkit-text-size-adjust: 100%;! }! ! // Ҿ਺͋Γ! @mixin pseudo-elem($width:0px, $height:0px, $display:block, $content:"") {! display:$display;! content: $content;! width: $width;! height: $height;! }!
10. mixinͷ࢖͍ํ // Ҿ਺ͳ͠! @include no-text-size-adjust;! ! // Ҿ਺શͯσϑΥϧτ஋! @include pseudo-elem();! // $widthҎ֎σϑΥϧτ஋! @include pseudo-elem(20px);! // $heightҎ֎σϑΥϧτ஋! @include pseudo-elem($height:20px);! ! // Compassͷmixin! @import “compass”;! @include border-radius(15px); Compassʹ͸ศརͳmixin͕ͨ͘͞Μ͋ΔͷͰ ੋඇ࢖͍·͠ΐ͏!
11. ࠓ೔ͷ࿩୊ @extendͱPlaceholder Selector ͪΐͬͱ͚ͩϓϩάϥϛϯάͬΆ͍͜ͱ
12. @extendͱ
    Placeholder Selector
13. @extendͱ͸ ผͷηϨΫλͷશͯͷελΠϧΛܧঝ͢Δ id/class ٖࣅཁૉ/ٖࣅclass ଐੑηϨΫλ ֤ηϨΫλͷ࿈݁ Plaeceholder Selector
14. @extendͱ͸ .foo{! // id/class! @extend #hoge;! @extend .hoge;! ! // ٖࣅཁૉ/ٖࣅclass! @extend .hoge:after;! @extend .hoge:first-child;! ! // ଐੑηϨΫλ! @extend .hoge[title="hoge"];! ! // Placeholder Selector! @extend %placeholder;! ! }
15. .buttonA{! @include border-radius(10px);! width: 200px;! height: 25px;! line-height: 25px;! border: 4px solid #ffff00;! background-color: #ff0000;! }! ! .buttonB{! @include border-radius(10px);! width: 200px;! height: 25px;! line-height: 25px;! border: 4px solid #00ffff;! background-color: #0000ff;! } ྫ͑͹͜Μͳͷ ৭͕ҧ͏͚ͩ!
16. @extendΛ࢖͏ͱ… .buttonBase{! @include border-radius(10px);! width: 200px;! height: 25px;! line-height: 25px;! border-width: 4px;! border-style: solid;! }! ! .buttonA{! @extend .buttonBase;! border-color: #ffff00;! background-color: #ff0000;! }! .buttonB{! @extend .buttonBase;! border-color: #00ffff;! background-color: #0000ff;! }
17. @extendΛ࢖͏ͱ… .buttonBase, .buttonA, .buttonB {! -webkit-border-radius: 10px;! -moz-border-radius: 10px;! -ms-border-radius: 10px;! -o-border-radius: 10px;! border-radius: 10px;! width: 200px;! height: 25px;! line-height: 25px;! border-width: 4px;! border-style: solid;! }! ! .buttonA {! border-color: #ffff00;! background-color: #ff0000;! }! ! .buttonB {! border-color: #00ffff;! background-color: #0000ff;! }
18. @mixin͡ΌͩΊͳͷʁ @mixin buttonBase($border-color, $bg-color){! @include border-radius(10px);! width: 200px;! height: 25px;! line-height: 25px;! border-width: 4px;! border-style: solid;! border-color: $border-color;! background-color: $bg-color;! }! ! .buttonA{! @include buttonBase(#ffff00, #ff0000);! }! .buttonB{! @include buttonBase(#00ffff, #0000ff);! }
19. @mixin͡ΌͩΊͳͷʁ .buttonA {! -webkit-border-radius: 10px;! -moz-border-radius: 10px;! -ms-border-radius: 10px;! -o-border-radius: 10px;! border-radius: 10px;! width: 200px;! height: 25px;! line-height: 25px;! border-width: 4px;! border-style: solid;! border-color: yellow;! background-color: red;! }! ! .buttonB {! -webkit-border-radius: 10px;! -moz-border-radius: 10px;! -ms-border-radius: 10px;! -o-border-radius: 10px;! border-radius: 10px;! width: 200px;! height: 25px;! line-height: 25px;! border-width: 4px;! border-style: solid;! border-color: yellow;! background-color: blue;! } ແବʹCSS͕ੜ੒͞ΕΔʂ
20. ϧʔϧηοτΛ֦ு͢Δ͚ͩͳΒ @extendΛ࢖͍·͠ΐ͏
21. Placeholder Selectorͱ͸ ॻ͖ํ͸ଞͷηϨΫλͷ@extendͱҰॹ %placeholder {! width: 100px;! height: 50px;! }! ! .extendA {! @extend %placeholder;! }! ! .extendB {! @extend %placeholder;! }
22. Placeholder Selectorͱ͸ .extendA, .extendB {! width: 100px;! height: 50px;! } Placeholder Selector͸ CSSʹॻ͖ͩ͞Εͳ͍
23. ˚ɹclassΛextend
    ̋ɹPlaceholderΛextend
24. ͳͥPlaceholderΛ࢖͏ͷ͔ common/_button.scss! ! .button{! @include border-radius(10px);! width: 200px;! height: 25px;! line-height: 25px;! border-width: 4px;! border-style: solid;! }! ! .buttonA{! @extend .button;! border-color: #ffff00;! background-color: #ff0000;! }! ! .buttonB{! @extend .button;! border-color: #ffff00;! background-color: #0000ff;! } A͞Μ ൚༻తͳ໊લΛ࢖͍ͬͯΔ
25. ͳͥPlaceholderΛ࢖͏ͷ͔ subset/page.scss! ! .button {! width: 220px;! } B͞Μ extend͞ΕͯΔͷΛ஌Βͣʹ ্ॻ͖ͯ͠͠·͏ͱ…
26. ͳͥPlaceholderΛ࢖͏ͷ͔ app.css! ! .button, .buttonA, .buttonB {! width: 200px;! height: 25px;! }! ! ! .buttonA {! background-color: red;! }! ! ! .buttonB {! background-color: blue;! }! ! ! .button, .buttonA, .buttonB {! width: 220px;! } extendͯ͠Δclass·Ͱ ্ॻ͖ͷӨڹΛड͚ͯ͠·͏
27. A͞Μʮ(^ρ^)ʯ
28. A͞Μ͕PlaceholderΛ࢖ͬͯͨΒ… B͞Μ͸্ॻ͖͠ͳ͔ͬͨ(͔΋͠Εͳ͍) B͞Μ͸PlaceholderΛextendͨ͠
    (͔΋͠Εͳ͍) A͞Μ͸΋ͬͱͦΕΒ໊͍͠લΛ͚ͭͨ
    (͔΋͠Εͳ͍)
29. ໊લΛ͚ͭΔͱ͖͸ؾΛ͚ͭ·͠ΐ͏
    Placeholder SelectorΛ࢖͍·͠ΐ͏
30. @extend͸͘͢͝ศར
31. .m5 {! margin: 5px;! }! ! .hoge {! @extend .m5;! }! ! .fuga {! @extend .m5;! }! ! ... @extendͷ஫ҙ఺ ศར͔ͩΒͱ͍ͬͯ৭ΜͳॴͰ @extendΛ࢖͍·͘Δͱ…
32. ࣮ࡍʹ΍Β͔ͨ͠ྫ.css! ! ! .ui_items .ui_items_action > .ui_cols:last-child .ui_col,! .ui_items .ui_items_action > .ui_navico:last-child .ui_col,! .ui_items .box_userdatas_min .ui_items_action > .lst_userdatas:last-child .ui_col,! .box_userdatas_min .ui_items .ui_items_action > .lst_userdatas:last-child .ui_col,! .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .ui_col,! .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .ui_col,! .ui_items .ui_items_action > .box_btns:last-child .ui_col,! .ui_items .ui_items_action > .box_btns_bottom:last-child .ui_col,! .ui_items .ui_items_action > .ui_cols:last-child .ui_navico .navico_thumb,! .ui_navico .ui_items .ui_items_action > .ui_cols:last-child .navico_thumb,! .ui_items .ui_items_action > .ui_navico:last-child .navico_thumb,! .ui_items .box_userdatas_min .ui_items_action > .lst_userdatas:last-child .ui_navico .navico_thumb,! .ui_navico .ui_items .box_userdatas_min .ui_items_action > .lst_userdatas:last-child .navico_thumb,! .box_userdatas_min .ui_items .ui_items_action > .lst_userdatas:last-child .ui_navico .navico_thumb,! .ui_navico .box_userdatas_min .ui_items .ui_items_action > .lst_userdatas:last-child .navico_thumb,! .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .ui_navico .navico_thumb,! .ui_navico .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .navico_thumb,! .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .ui_navico .navico_thumb,! .ui_navico .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .navico_thumb,! .ui_items .ui_items_action > .box_btns:last-child .ui_navico .navico_thumb,! .ui_navico .ui_items .ui_items_action > .box_btns:last-child .navico_thumb,! .ui_items .ui_items_action > .box_btns_bottom:last-child .ui_navico .navico_thumb,! .ui_navico .ui_items .ui_items_action > .box_btns_bottom:last-child .navico_thumb,! .ui_items .ui_items_action > .ui_cols:last-child .ui_navico .navico_msg,! .ui_navico .ui_items .ui_items_action > .ui_cols:last-child .navico_msg,! .ui_items .ui_items_action > .ui_navico:last-child .navico_msg,! .ui_items .box_userdatas_min .ui_items_action > .lst_userdatas:last-child .ui_navico .navico_msg,! .ui_navico .ui_items .box_userdatas_min .ui_items_action > .lst_userdatas:last-child .navico_msg,! .box_userdatas_min .ui_items .ui_items_action > .lst_userdatas:last-child .ui_navico .navico_msg,! .ui_navico .box_userdatas_min .ui_items .ui_items_action > .lst_userdatas:last-child .navico_msg,! .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .ui_navico .navico_msg,! .ui_navico .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .navico_msg,! .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .ui_navico .navico_msg,! .ui_navico .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .navico_msg,! .ui_items .ui_items_action > .box_btns:last-child .ui_navico .navico_msg,! .ui_navico .ui_items .ui_items_action > .box_btns:last-child .navico_msg,! .ui_items .ui_items_action > .box_btns_bottom:last-child .ui_navico .navico_msg,! .ui_navico .ui_items .ui_items_action > .box_btns_bottom:last-child .navico_msg,! .ui_items .ui_items_action > .ui_cols:last-child .box_userdatas_min .lst_userdatas .lst_userdata,! .box_userdatas_min .lst_userdatas .ui_items .ui_items_action > .ui_cols:last-child .lst_userdata,! .ui_items .ui_items_action > .ui_navico:last-child .box_userdatas_min .lst_userdatas .lst_userdata,! .box_userdatas_min .lst_userdatas .ui_items .ui_items_action > .ui_navico:last-child .lst_userdata,! .ui_items .box_userdatas_min .ui_items_action > .lst_userdatas:last-child .lst_userdata,! .box_userdatas_min .ui_items .ui_items_action > .lst_userdatas:last-child .lst_userdata,! .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .box_userdatas_min .lst_userdatas .lst_userdata,! .box_userdatas_min .lst_userdatas .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .lst_userdata,! .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .box_userdatas_min .lst_userdatas .lst_userdata,! .box_userdatas_min .lst_userdatas .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .lst_userdata,! .ui_items .ui_items_action > .box_btns:last-child .box_userdatas_min .lst_userdatas .lst_userdata,! .box_userdatas_min .lst_userdatas .ui_items .ui_items_action > .box_btns:last-child .lst_userdata,! .ui_items .ui_items_action > .box_btns_bottom:last-child .box_userdatas_min .lst_userdatas .lst_userdata,! .box_userdatas_min .lst_userdatas .ui_items .ui_items_action > .box_btns_bottom:last-child .lst_userdata,! .ui_items .ui_items_action > .ui_cols:last-child .box_userlist .lst_userlist .user_icon,! .box_userlist .lst_userlist .ui_items .ui_items_action > .ui_cols:last-child .user_icon,! .ui_items .ui_items_action > .ui_navico:last-child .box_userlist .lst_userlist .user_icon,! .box_userlist .lst_userlist .ui_items .ui_items_action > .ui_navico:last-child .user_icon,! .ui_items .box_userdatas_min .ui_items_action > .lst_userdatas:last-child .box_userlist .lst_userlist .user_icon,! .box_userlist .lst_userlist .ui_items .box_userdatas_min .ui_items_action > .lst_userdatas:last-child .user_icon,! .box_userdatas_min .ui_items .ui_items_action > .lst_userdatas:last-child .box_userlist .lst_userlist .user_icon,! .box_userlist .lst_userlist .box_userdatas_min .ui_items .ui_items_action > .lst_userdatas:last-child .user_icon,! .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .box_userlist .lst_userlist .user_icon,! .box_userlist .lst_userlist .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .user_icon,! .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .box_userlist .lst_userlist .user_icon,! .box_userlist .lst_userlist .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .user_icon,! .ui_items .ui_items_action > .box_btns:last-child .box_userlist .lst_userlist .user_icon,! .box_userlist .lst_userlist .ui_items .ui_items_action > .box_btns:last-child .user_icon,! .ui_items .ui_items_action > .box_btns_bottom:last-child .box_userlist .lst_userlist .user_icon,! .box_userlist .lst_userlist .ui_items .ui_items_action > .box_btns_bottom:last-child .user_icon,! .ui_items .ui_items_action > .ui_cols:last-child .box_cheer_list .lst_userlist .user_icon,! .box_cheer_list .lst_userlist .ui_items .ui_items_action > .ui_cols:last-child .user_icon,! .ui_items .ui_items_action > .ui_navico:last-child .box_cheer_list .lst_userlist .user_icon,! .box_cheer_list .lst_userlist .ui_items .ui_items_action > .ui_navico:last-child .user_icon,! .ui_items .box_userdatas_min .ui_items_action > .lst_userdatas:last-child .box_cheer_list .lst_userlist .user_icon,! .box_cheer_list .lst_userlist .ui_items .box_userdatas_min .ui_items_action > .lst_userdatas:last-child .user_icon,! .box_userdatas_min .ui_items .ui_items_action > .lst_userdatas:last-child .box_cheer_list .lst_userlist .user_icon,! .box_cheer_list .lst_userlist .box_userdatas_min .ui_items .ui_items_action > .lst_userdatas:last-child .user_icon,! .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .box_cheer_list .lst_userlist .user_icon,! .box_cheer_list .lst_userlist .ui_items .box_user_details .box_userdatas_detail .ui_items_action > .lst_userdatas_row:last-child .user_icon,! .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .box_cheer_list .lst_userlist .user_icon,! .box_cheer_list .lst_userlist .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .lst_userdatas_row:last-child .user_icon,! .ui_items .ui_items_action > .box_btns:last-child .box_cheer_list .lst_userlist .user_icon,! .box_cheer_list .lst_userlist .ui_items .ui_items_action > .box_btns:last-child .user_icon,! .ui_items .ui_items_action > .box_btns_bottom:last-child .box_cheer_list .lst_userlist .user_icon,! .box_cheer_list .lst_userlist .ui_items .ui_items_action > .box_btns_bottom:last-child .user_icon,! .ui_items .ui_items_action > .ui_cols:last-child .box_userlist .lst_userlist .user_card,! .box_userlist .lst_userlist .ui_items .ui_items_action > .ui_cols:last-child .user_card,! .ui_items .ui_items_action > .ui_navico:last-child .box_userlist .lst_userlist .user_card,! .box_userlist .lst_userlist .ui_items .ui_items_action > .ui_navico:last-child .user_card,! .ui_items .ui_items_action > .box_btns:last-child .box_user_details .box_userdatas_detail .lst_userdatas_row > .lst_userdata,! .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .box_btns:last-child .lst_userdatas_row > .lst_userdata,! .ui_items .ui_items_action > .box_btns_bottom:last-child .box_user_details .box_userdatas_detail .lst_userdatas_row > .lst_userdata,! .box_user_details .box_userdatas_detail .ui_items .ui_items_action > .box_btns_bottom:last-child .lst_userdatas_row > .lst_userdata{! padding-bottom:0px! } @extendͷ஫ҙ఺ padding-bottom: 0px;
33. @extend͸༻๏༻ྔΛकͬͯ
    ਖ਼͓͘͠࢖͍͍ͩ͘͞ ϧʔϧηοτ͕গͳ͍΋ͷΛextend͠ͳ͍ ੜ੒͞ΕΔCSSͷྔ(ίετ)Λߟ͑·͠ΐ͏ ωετͷਂ͍ॴͰextend͠ͳ͍ ωετ͕ਂ͍ͱͦΕ͚ͩͰηϨΫλ͕௕͘ͳΓ·͢ Placeholder SelectorΛ࢖͏ ΋͠class͕ࢠଙηϨΫλΛ͍࣋ͬͯͨ৔߹ɺશͯड͚ ܧ͕Ε·͢
34. ! ! $g-margin-value: 5px;! ! .hoge {! margin: $g-margin- value;! }! ! .fuga {! margin: $g-margin- value;! } OK ϧʔϧηοτ͕গͳ͍΋ͷΛextend͠ͳ ͍ ! ! .m5 {! margin: 5px;! }! ! .hoge {! @extend .m5;! }! ! .fuga {! @extend .m5;! }! ! ... NG ! ! <div class="hoge m5"></div>! <div class="fuga m5"></div> OK classΛෳ਺ࢦఆ͢Δͷ΋ΞϦ
35. ! ! ! .hoge_fuga_piyo1 {! @extend %foo;! }! OK ωετͷਂ͍ॴͰextend͠ͳ͍ ! ! ! .hoge {! .fuga {! .piyo {! .piyo1 {! @extend %foo;! }! }! }! }! NG ਂ͍ωετ͸classΛఆٛ͠௚͢͜ͱͰ ղܾͰ͖Δ৔߹͕ଟ͍
36. ! ! ! %content-base {! // content styles! ! .hoge-children {! // some styles! }! }! ! .hoge-content {! @extend %content-base;! ! .other-children {! // some styles! }! }! ! .fuga-content {! @extend %content-base;! }! OK Placeholder SelectorΛ࢖͏ ! ! ! .hoge-content {! // content styles! ! .hoge-children {! // some styles! }! ! .other-children {! // some styles! }! }! ! .fuga-content {! @extend .hoge-content;! }! NG ෆཁͳ΋ͷ·Ͱextend͠ͳ͍Α͏ʹ
37. ͪΐͬͱ͚ͩ ϓϩάϥϛϯάͬΆ͍͜ ͱ
38. ੍ޚจ @if @for @each
39. @if ৚݅෼ذ ΋͠ʙͳΒɺ͡Όͳͯ͘ʙͳΒɺͦΕҎ֎ͳΒʙ
40. @if ৚݅A{! // ৚݅Aͷͱ͖ʹ΍Γ͍ͨ͜ͱ! }@else if ৚݅B{! // ৚݅Bͷͱ͖ʹ΍Γ͍ͨ͜ͱ! }@else if ৚݅C{! // ৚݅Cͷͱ͖ʹ΍Γ͍ͨ͜ͱ! }@else{! // ৚݅A,B,CͷͲΕͰ΋ͳ͍ͱ͖ʹ΍Γ͍ͨ͜ͱ! }! @if
41. @for ϧʔϓ(܁Γฦ͠)จ ͦͷ1 ܾΊΒΕͨ਺͚ͩ܁Γฦ͢ 1͔Β10·Ͱ܁Γฦ͍ͨ͠ɺͳͲ
42. @for $ม਺ from ։࢝͢Δ਺ through ऴྃ͢Δ਺ {! // ϧʔϓ͍ͤͨ͜͞ͱ! } @for
43. @each ϧʔϓจ ͦͷ2 ༩͑ΒΕͨϦετܕͷ஋Λ1ͭͣͭॲཧ͢Δ Ϧετͷத਎Λऔ͖͍ͬͯͨɺͳͲ
44. @each $ม਺ in $Ϧετม਺{! // ϧʔϓ͍ͤͨ͜͞ͱ! } @each
45. $width: 100px;! .list-item {! // $i͕1͔Β1ͭͮͭ૿͍͑ͯͬͯɺ6ʹͳΔ·Ͱ܁Γฦ͢! @for $i from 1 through 6 {! // nth-child($i൪໨)! &:nth-child(#{$i}) {! // ΋͠$i͕6ͳΒ(=࠷ޙͷϧʔϓͳΒ)! @if $i == 6 {! margin-right: 0;! }! a {! background-position: -$width * ($i - 1) 0;! }! }! }! } @ifͱ@forͰ
46. .list-item:nth-child(1) a {! background-position: 0px 0;! }! .list-item:nth-child(2) a {! background-position: -100px 0;! }! .list-item:nth-child(3) a {! background-position: -200px 0;! }! .list-item:nth-child(4) a {! background-position: -300px 0;! }! .list-item:nth-child(5) a {! background-position: -400px 0;! }! .list-item:nth-child(6) {! margin-right: 0;! }! .list-item:nth-child(6) a {! background-position: -500px 0;! }! @ifͱ@forͰ @ifͷ݁Ռ
47. $color_values: //৭Λ؅ཧ͓ͯ͘͠Ϧετ;! $categories: 'common', 'shop', 'heroin', 'dummy';! ! // Ϧετܕ$categoriesͷ஋ͻͱͭͻͱͭΛ! // $keyʹೖΕͯϧʔϓॲཧΛ͢Δ! @each $key in $categories {! $colors: getValue($color_values, $key);! // ΋͠$colorsͷ஋͕nullͩͬͨΒ! @if $colors == null {! // %$colorsͷ஋ΛܾΊଧͪʹ͢Δ! $colors: getValue($color_values, 'common');! }! ! // nth($value, $n)͸Ϧετͷ$n൪໨ͷ஋Λऔͬͯ͘Δؔ਺! .btn-set-#{$key} {! background: nth($colors, 1);! border: 1px solid nth($colors, 2);! }! } @ifͱ@eachͰ
48. .btn-set-common {! background: #cdebff;! border: 1px solid #89b8d7;! }! ! .btn-set-shop {! background: #c9fdf3;! border: 1px solid #79ead4;! }! ! .btn-set-heroin {! background: mistyrose;! border: 1px solid #df7268;! }! ! .btn-set-dummy {! background: #cdebff;! border: 1px solid #89b8d7;! }! @ifͱ@eachͰ @ifͷ݁Ռ
49. ؤுΕ͹΋ͬͱෳࡶͳॲཧ΋ॻ͚·͕͢ɺ
    ͋·Γʹෳࡶ͗͢Δͱଞͷਓ͕ࠔΓ·͢
    (ࣗռ)
50. @function ؔ਺ ౉͞Εͨ஋ʹԿΒ͔ͷॲཧΛࢪͯ݁͠ՌΛฦ͢ @mixinͱҧͬͯ”஋Λฦ͢”͜ͱ͔͠Ͱ͖ͳ͍
51. @function($Ҿ਺){! // ͳΜ͔ͷॲཧ! @return $݁Ռ;! } @function
52. ؔ਺͕ࣗ࡞Ͱ͖Δඞཁ͸ͦΜͳʹ ͋Γ·ͤΜ
53. ൺֱతΑ͘࢖͏ͱࢥ͏ ؔ਺Ϧετ lighten($color)/darken($color) ৭Λ໌Δͨ͘͠Γ҉ͨ͘͠Γ nth($list, $index) ϦετͷಛఆͷҐஔ(index)ͷ஋Λऔ͖ͬͯͨΓ linear-gradient($colorstops, [$start], [$image]) άϥσʔγϣϯΛ࡞ͬͨΓ(ཁCompass) image-url($src)/image-width($src)/image-height($src) ը૾ͷURL/෯/ߴ͞Λऔಘͨ͠Γ(ཁCompass)
54. ଞʹͲΜͳͷ͕͋Δ͔஌Γ͍ͨਓ ͸ Module: Sass::Script::Functions http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
55. ࢀߟจݙ Sass - Syntactically Awesome Stylesheets http://sass-lang.com/ Compass Core Framework | Compass Documentation http://compass-style.org/reference/compass/ Sass 3.2 ΦϨΦϨϦϑΝϨϯε | CyberAgent TechReport http://www.cyberagent.co.jp/technology/ca_tech/report/8740444.html @extend | kanapple.net http://kanapple.net/study/archives/2 Module: Sass::Script::Functions http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html ʮSass ೖ໳ʯʹؔ͢Δݕࡧ݁Ռ | SSSLIDE http://sssslide.com/slides?utf8=%E2%9C%93&q=Sass+%E5%85%A5%E9%96%80