#6 ScssとCompass 再入門

Transcript

1. Sass/Compass ࠶ೖ໳ 4&,"*&ษڧձ
   
   
   
2. ΄ͳɺ͍͔͜ʙ
3. ΞδΣϯμ 4BTTͱ͸
   4DTTػೳ঺հ
   $PNQBTTͱ͸
4. ΞδΣϯμ 4BTTͱ͸
   4DTTػೳ঺հ
   $PNQBTTͱ͸
5. 4BTTͱ͸ 4BTTɿ
   ʮ4ZOUBDUJDBMMZ
   "XFTPNF
   4UZMF
   4IFFUTʯ
   $44Λ֦ுͨ͠ϝλݴޠͰ͢ɻ
   ެࣜαΠτɿIUUQTBTTMBOHDPN
6. 4BTTͱ͸ 4BTTɿ
   ʮ4ZOUBDUJDBMMZ
   "XFTPNF
   4UZMF
   4IFFUTʯ
   $44Λ֦ுͨ͠ϝλݴޠͰ͢ɻ
   ެࣜαΠτɿIUUQTBTTMBOHDPN
7. 4BTTͱ 4DTTʢ4BTTZ
   $44ʣͷ ҧ͍͸ ʁʁ ެࣜαΠτɿ
 IUUQTBTTMBOHDPNEPDVNFOUBUJPOpMF4"44@3&'&3&/$&IUNMTZOUBY
 
 ߏจͷҧ͍
 ɾ4DTT
 $44ͷߏจΛ֦ுͨ͠΋ͷ
 ֦ுࢠ͸TDTTΛ࢖͍·͢ɻ ɾ4BTT
 ݹ͍ߏจͰΠϯσϯτߏจͱͯ͠஌ΒΕ͍ͯΔ΋ͷͰ͢ɻ\^ͳͲ ͸࢖Θͳ͍ɻ
 ֦ுࢠ͸TBTTΛ࢖͍·͢ɻ
   
8. body
 color: #000 TBTT TDTT body {
 color: #000;
 } ೾ׅހʨʩɺηϛίϩϯʀ ɹɹɹɹɹෆཁɹɹɹɹɹɹɹɹɹɹɹɹඞཁ
   ɹɹɹɹɹ
   
   ɹɹɹ
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   !NJYJO
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   !JODMVEF ೾ׅހʨʩɺηϛίϩϯʀ
9. ࠓ೔͸
   Ұൠతʹ޿͘࢖ΘΕ͍ͯΔ
   4DTTͷػೳΛ
   ঺հ͠·͢ɻ
10. HFN
    VQEBUF
    TZTUFN
 HFN
    JOTUBMM
    TBTT
 TBTT
    Wɹɹˡ֬ೝ
 4BTT
    
    4FMFDUJWF
    4UFWF
11. ΞδΣϯμ 4BTTͱ͸
    4DTTػೳ঺հ
    $PNQBTTͱ͸
12. 4DTT
    ػೳ঺հ
13. Variables
    
    ม਺ TDTT DTT $font-stack: Helvetica, sans- serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } body { font: 100% Helvetica, sans- serif; color: #333; }
14. Variables
    
    ม਺ TDTT DTT $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } body { font: 100% Helvetica, sans-serif; color: #333; } ม਺ͷఆٛ ม਺ͷݺͼग़͠
15. Nesting
    
    ೖΕࢠ TDTT DTT nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
16. Nesting
    
    ೖΕࢠ TDTT DTT nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } ೖΕࢠ
17. Nesting
    
    ೖΕࢠ
    
    ਌ͷࢀর TDTT DTT nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; &:hover { text-decoration: underline; } } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } nav a:hover {
 text-decoration: underline; }
18. Nesting
    
    ೖΕࢠ
    
    ਌ͷࢀর TDTT DTT nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; &:hover { text-decoration: underline; } } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } nav a:hover {
 text-decoration: underline; } ਌ͷࢀর
19. 4DTTϑΝΠϧʹΞϯμʔείΞʮ
    @
    ʯͰ࢝·ΔϑΝΠϧ໊Λ෇͚Δ͚ͩ
 ྫɿɹ@SFTFUTDTT
 
 ϝϯςφϯε͠΍͍͢Α͏ʹɺϞδϡʔϧ୯ҐͳͲͰ࡞੒ͨ͠Γศར
 
 Partials
    
    ύʔγϟϧ @SFTFUTDTT @NPEVMTDTT DPNNPOTDTT DPNNPODTT @MBZPVUTDTT DPNQJMFE
20. !JNQPSUσΟϨΫςΟϒͰಡΈࠐΈ·͢ɻ
 ʮ
    @
    ʯ֦ுࢠTDTTͷهड़ೖΓ·ͤΜɻ Import
    
    Πϯϙʔτ TDTT DTT // _reset.scss html, body, ul, ol { margin: 0; padding: 0; } // base.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; } html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
21. !JNQPSUσΟϨΫςΟϒͰಡΈࠐΈ·͢ɻ
 ʮ
    @
    ʯ֦ுࢠTDTTͷهड़ೖΓ·ͤΜɻ Import
    
    Πϯϙʔτ TDTT DTT // _reset.scss html, body, ul, ol { margin: 0; padding: 0; } // base.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; } html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; } ੜ੒͞Εͳ͍ CBTFDTT CBTFTDTT
22. ϛοΫεΠϯͰ͍͔ͭ͘ͷελΠϧఆٛΛάϧʔϐϯά͓͖ͯ͠ݺͼग़͢͜ͱ͕Ͱ͖· ͢ɻ
 !NJYJO
    ϛοΫεΠϯ໊ ม਺ \^
 ݺͼग़͠ˠɹ!JODMVEF
    ϛοΫεΠϯ໊ QY  Mixin
    
    ϛοΫεΠϯ TDTT DTT @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
23. ϛοΫεΠϯͰ͍͔ͭ͘ͷελΠϧఆٛΛάϧʔϐϯά͓͖ͯ͠ݺͼग़͢͜ͱ͕Ͱ͖· ͢ɻ
 !NJYJO
    ϛοΫεΠϯ໊ ม਺ \^
 ݺͼग़͠ˠɹ!JODMVEF
    ϛοΫεΠϯ໊ QY  Mixin
    
    ϛοΫεΠϯ TDTT DTT @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } ελΠϧͷఆٛ ݺͼͩ͠ ม਺΋౉ͤΔ ݺͼग़͠ઌͰల։͞ΕΔ
 Ҿ਺΋࢖͑Δ
24. !FYUFOEΛ࢖͏͜ͱʹΑͬͯDTTϓϩύςΟʔΛଞͷηϨΫλʔͰ ܧঝ͢Δ͜ͱ͕Ͱ͖·͢ɻ Extend/Inheritance
    
    ܧঝ TDTT DTT .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; } .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }
25. !FYUFOEΛ࢖͏͜ͱʹΑͬͯDTTϓϩύςΟʔΛଞͷηϨΫλʔͰ ܧঝ͢Δ͜ͱ͕Ͱ͖·͢ɻ Extend/Inheritance
    
    ܧঝ TDTT DTT .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; } .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } ελΠϧͷఆٛ ܧঝݩʹηϨΫλ͕௥Ճ͞ΕΔ
26. !FYUFOEΛ࢖͏͜ͱʹΑͬͯDTTϓϩύςΟʔΛଞͷηϨΫλʔͰ ܧঝ͢Δ͜ͱ͕Ͱ͖·͢ɻ Extend/Inheritance
    
    ܧঝ
    ϓϨʔεϗϧμʔ TDTT DTT %message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend %message; border-color: green; } .error { @extend %message; border-color: red; } .warning { @extend %message; border-color: yellow; } .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }
27. !FYUFOEΛ࢖͏͜ͱʹΑͬͯDTTϓϩύςΟʔΛଞͷηϨΫλʔͰ ܧঝ͢Δ͜ͱ͕Ͱ͖·͢ɻ Extend/Inheritance
    
    ܧঝ
    ϓϨʔεϗϧμʔ TDTT DTT %message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend %message; border-color: green; } .error { @extend %message; border-color: red; } .warning { @extend %message; border-color: yellow; } .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } ελΠϧͷఆٛ DTTʹ͸ग़ྗ͞Εͳ͍
28. 
    
    
    
    BOE
    ͕࢖͑·͢ɻ Operators
    
    ԋࢉࢠ TDTT DTT .container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; } .container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complimentary"] { float: right; width: 31.25%; }
29. !JG
    !GPS
    !FBDI
    BOE
    !XIJMFͳͲ΋࢖͑·͢ɻ Other
    
    ͦͷଞ
30. ΞδΣϯμ 4BTTͱ͸
    4DTTػೳ঺հ
    $PNQBTTͱ͸
31. $PNQBTT
    ͱ͸
32. $PNQBTT
    
    JT
    
    BO
    PQFOTPVSDF
    
    $44
    "VUIPSJOH
    'SBNFXPSL
33. $PNQBTT
    
    JT
    
    BO
    PQFOTPVSDF
    
    $44
    "VUIPSJOH
    'SBNFXPSL ΦʔϓϯιʔεͷϑϨʔϜϫʔΫͰ͢ɻ
 4DTT͕ΑΓศརʹ࢖͍΍͘͢ͳΓ·͢ɻ
34. gem update --system
 gem install compass
35. DPNQBTT
    DSFBUF
    ϓϩδΣΫτ໊
36. DPOHJHSC
 TBTT
 TUZMFTIFFUT # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" cache = false # You can select your preferred output style here (can be
37. # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" cache = false # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed output_style = :expanded # To enable relative paths to assets via compass helper functions. output_style = :expanded or :nested or :compact or :compressed expanded nested compact compressed
38. # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" cache = false # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed output_style = :expanded # To enable relative paths to assets via compass helper functions. line_comments = false or true line_comments = true
39. compass watch ߋ৽
40. compass watch
41. compass watch ࠓճ͸ίϯύΠϧ͢Δͷ͸DPNQBTTͰ͕ͨ͠ HSVOUTQSJUFTNJUI
 HSVOUBVUPQSFpYFS
    HSVOUDPOUSJCJNBHFNJO
    HSVOUDPOUSJCNJODTT
    HVMQTQSJUFTNJUI
    HVMQBVUPQSFpYFS
    
    HVMQJNBHFNJO
    HVMQNJOJGZDTT
42. IUUQDPNQBTTTUZMFPSHSFGFSFODFDPNQBTT $PNQBTT࢖͏ཧ༝͕͋Μ·Γͳ͍Ͱ͕͢
43. @import “compass"; @import “compass/css3" @import “compass/layout" @import "compass/reset"
44. .box-sizing-example { background: red; padding: 20px; border: 10px solid green; margin: 20px; width: 200px; }
    
    DPOUFOUCPY
    \
    
    
    !JODMVEF
    CPYTJ[JOH DPOUFOUCPY 
    ^
    
    
    CPSEFSCPY
    \
    
    
    !JODMVEF
    CPYTJ[JOH CPSEFSCPY 
    ^ TDTT
45. .box-sizing-example { background: red; padding: 20px; border: 10px solid green; margin: 20px; width: 200px; } #content-box { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } #border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } compiled DTT
46. ࣌୅ͷྲྀΕ͸ૣ͍ʔ
 ͔࣍Β࣍ͱग़ͯ͘Δʂ
    PostCSS
 https://github.com/postcss 
 
 libSass
 http://sass-lang.com/libsass
47. ˒˒˒Happy Styling!˒˒˒
48. ࢀߟ IUUQDPNQBTTTUZMFPSH IUUQTBTTMBOHDPN IUUQCPVSCPOJP .JYJO
    -JCSBSZ