SCSS + COMPASS 入門

Download SCSS + COMPASS 入門

Post on 14-May-2015

1.089 views

Category:

Technology

4 download

Embed Size (px)

DESCRIPTION

IT

TRANSCRIPT

<ul><li>1.SCSS + COMPASS2013.5.18 @ITvol. 17@spark6251 N@N</li></ul> <p>2. N@N@spark6251 N@NNOaNNOAN Web 3. SCSS SCSS SCSS + COMPASS COMPASS 4. 1. SCSS CSSHamlSass SassCSSSCSSHaml!!!%html%head%title Haml%body 5. SCSS SCSSRuby COMPASS.scss Ruby 1.8.7 6. Ruby$ sudo apt-get install libssl-dev zlib1g-dev libreadline6-dev$ wget ftp://ftp.ruby-lang.org/pub/ruby/ruby-2.0-stable.tar.gz$ tar xfvz ruby-2.0-stable.tar.gz$ cd ruby-2.0.0-p0$ ./configure$ make$ sudo make install 7. $ sudo gem update system$ sudo gem install sass$ sudo gem install compass 8. $ sudo gem update system$ sudo gem install sass$ sudo gem install compassWindowsRubyDebian[] 9. 2. SCSSSCSS 10. ul {hogeli {fuga}&gt; ul {piyo}}ul {hoge}ul li {fuga}ul &gt; ul {piyo} 11. a {hoge&amp;:hover {fuga}&amp;.Class {piyo}}a {hoge}a:hover {fuga}a.Class {piyo} 12. $main-color: #ABCDEF;$list-font-size: 18px;$a: 1;$d: 1px black solid;border: $d; =&gt;border: 1px black solid; 13. $a: 6px;$b: 7;$c: 3px;$a 5 =&gt; 1px$a 5px =&gt; 1px$a 5em =&gt; error$a / $b =&gt; 0.85714px$a / $c =&gt; 2 14. $a: top;border-#{$a}: 1px black solid; =&gt;border-top: 1px black solid;#{}$b: 15px;$c: 3px;font-size: #{$b} / #{$c}; =&gt;Font-size: 15px / 3px;#{} 15. @mixin f {hoge}a {@include f;}a {hoge} 16. @mixin f($a: 10px) {width: $a;}ul {@include f;}li {@include f(5px);}ul {width: 10px;}li {width: 5px;} 17. for@for $i from 1 through 3 {.item-#{$i} {width: 2em * $i;}}.item-1 {width: 2em;}.item-2 {width: 4em;}.item-3 {width: 6em;} 18. if$a: red;p {@if true {hoge}@if false {fuga}@if null {piyo}@if $a == red {foo}}p {hogefoo} 19. 3. SCSS + COMPASS COMPASS .scss COMPASS 20. $ compass create$ compass watchcompass createCOMPASScompass watchcss 21. config.rb 22. config.rbhttp_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts" 23. config.rb1http_path = "/"css_dir = "css"sass_dir = "css"images_dir = "img"javascripts_dir = "js"CSSSCSS 24. config.rb2# output_style = :expanded or ...:expanded :nested :compact :compressed 25. config.rb3# relative_assets = truetruefalse 26. config.rb4# line_comments = falsefalse/* line n, style.scss */ 27. $ compass compile -e productionconfig.rboutput_style =(environment == :production)? :compressed : :expanded-e production 28. @import "COMPASS";@import "COMPASS";COMPASSCompass Reference 29. border-radius.Class {@include border-radius;}#Id {@include border-radius(2px);} $default-border-radius .Class {-moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px;-ms-border-radius: 5px;border-radius: 5px;}#Id {-moz-border-radius: 2px;-webkit-border-radius: 2px;-o-border-radius: 2px;-ms-border-radius: 2px;border-radius: 2px;} 30. 4. COMPASS* = compass$ compass --help* create - COMPASS* watch - .scss* clean - help 31. 5. SCSS + COMPASSCSS 32. </p>