パフォーマンスから考えるSass/Compassの導入・運用

download パフォーマンスから考えるSass/Compassの導入・運用

of 107

  • date post

    17-Aug-2014
  • Category

    Design

  • view

    9.657
  • download

    13

Embed Size (px)

description

2013年1月12日(土) 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、石本 光司さん(サイバーエージェント) の『パフォーマンスから考えるSass/Compassの導入・運用』のスライドなどを公開します。 http://cssnite.jp/archives/post_2498.html

Transcript of パフォーマンスから考えるSass/Compassの導入・運用

  • Sass/Compass 3Web 2013.01.12 @CSS Nite LP, Disk 26CSS Preprocessor Shootout
  • @t32k
  • WebWeb Web
  • t32k.github.com/speed/
  • - - Sass/Compass- Syntax/@import- Nesting/@mixin/@extend- Compass/Styleguide-
  • 2012.06.01
  • 2012.06.01
  • EPC
  • Web Director?Google | CSS Nite LP, Disk 19
  • ()Koji Ishimoto @t32k 9, April, 2012
  • Web Developer!Measuring Web Perf. - - | CSS Nite LP, Disk 23
  • ()Koji Ishimoto @t32k 1, June, 2012
  • Start a web develop
  • Sass/Compass
  • 2012.06.04Assign2012.08.09Release!2012.06.01Join
  • 2012.06.04Assign2012.08.09Release!22012.06.01Join
  • ()Koji Ishimoto @t32k 4, June, 2012
  • UI DesignerJavaScriptHTML/CSSProduceriOS/AndroidEngineerSystemEngineerSystemEngineerSystemEngineer
  • Speed!
  • Page SpeedDevelopment Speed
  • ((((;))))
  • Youknow me ?
  • github.com/enja-oss/Sass
  • github.com/enja-oss/Sass
  • introduction
  • $ gem install sass
  • Syntax
  • .scss Sassy CSS.sass Indented Syntax
  • .scss.sass=table-basethtext-align: centerfont-weight: boldtd, thpadding: 2px=left($dist)float: leftmargin-left: $dist#data+left(10px)[email protected] table-base {th {text-align: center;font-weight: bold;}td, th {padding: 2px}}@mixin left($dist) {float: left;margin-left: $dist;}#data {@include left(10px);@include table-base;}
  • output.css#data {float: left;margin-left: 10px;}#data th {text-align: center;font-weight: bold;}#data td, #data th {padding: 2px;}
  • .scss.sass=table-basethtext-align: centerfont-weight: boldtd, thpadding: 2px=left($dist)float: leftmargin-left: $dist#data+left(10px)[email protected] table-base {th {text-align: center;font-weight: bold;}td, th {padding: 2px}}@mixin left($dist) {float: left;margin-left: $dist;}#data {@include left(10px);@include table-base;}
  • LoveSassyCSS
  • @import
  • t32k.github.com/speed/rtt/AvoidCssImport.html
  • box-modal.css header.csslist.cssmypage.cssnav_global.css nav_category.cssjser.css
  • box-modal.css header.csslist.cssmypage.cssnav_global.css nav_category.cssjser.cssapp.cssCompiled!
  • [email protected] "compass";@include global-reset;@import "_config";@import "_common";@import "_header";@import "_nav-global";@import "_nav-category";@import "_list";@import "_list-nest";@import "_box-modal";@import "_entrance";@import "_mypage";@import "_enquete";@import "_advice";@import "_katoken";
  • [email protected] "compass";@include global-reset;@import "_config";@import "_common";@import "_header";@import "_nav-global";@import "_nav-category";@import "_list";@import "_list-nest";@import "_box-modal";@import "_entrance";@import "_mypage";@import "_enquete";@import "_advice";@import "_katoken";app.css
  • development
  • Sass is powerful and dangerous.Jon Rohan @johnrohan 05, December, 2012
  • Nesting
  • .css.scss.component-A {.head {color: #fff;}.body {color: #ccc;}.foot {color: #000;}}.component-B {.head {color: #000;}.body {color: #fff;}.foot {color: #ccc;}}.component-A .head {color: #fff;}.component-A .body {color: #ccc;}.component-A .foot {color: #000;}.component-B .head {color: #000;}.component-B .body {color: #fff;}.component-B .foot {color: #ccc;}
  • www.ca-girlstalk.jp/category_new
  • (^o^)
  • Sass LESS Kokubo Kotarao @kotarok 25, February, 2012
  • Dont go more than four levels deep.
  • @mixin/@extend
  • [email protected] boxshadow {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.mixinA {@include boxshadow;}.mixinB {@include boxshadow;}.mixinC {@include boxshadow;}.mixinA {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.mixinB {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.mixinC {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}
  • extend.cssextend.scss.boxshadow {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.extendA {@extend .boxshadow;}.extendB {@extend .boxshadow;}.extendC {@extend .boxshadow;}.boxshadow, .extendA,.extendB, .extendC {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}
  • [email protected] boxshadow($color:#fff) {-webkit-box-shadow: 0 1px 0 0$color;box-shadow: 0 1px 0 0 $color;}.mixinA {@include boxshadow;}.mixinB {@include boxshadow(#ccc);}.mixinC {@include boxshadow(#000);}.mixinA {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.mixinB {-webkit-box-shadow: 0 1px 0 0 #ccc;box-shadow: 0 1px 0 0 #ccc;}.mixinC {-webkit-box-shadow: 0 1px 0 0 #000;box-shadow: 0 1px 0 0 #000;}
  • extend2.cssextend2.scss%boxshadow {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.extendA {@extend %boxshadow;}.extendB {@extend %boxshadow;}.extendC {@extend %boxshadow;}.extendA, .extendB, .extendC {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}
  • @extend()(;)
  • // Pseudo element initialization%_pe {display: block;content: "";}.back-page a {display: block;position: relative;padding: 10px 10px 10px 25px;&:after {@extend %_pe;position: absolute;width: 7px; height: 10px;top: 13px; right: 11px;background: ( .............. );}}ex1.scss
  • .ad-area:after, .detail .comment:after, .comment .expand:before,.comment .child:before, .comment .child:after, .thread-notify:before, .line:before, .box-rel .thread:after, .box-rel .right a:after, .cate-new .list-view > li:after, .cate-new .list-view > li > a:after, .cate-new .list-view .c-new >a:after, .cate-new .list-child li:before, .cate-new .list-child a:after, .cate-new .thread:after, .cate-new .thread.new:before, .cate-new.archive .line-text:after, .list-nested .child li:after, .posted-talk .headline:before, .posted-talk li:before, .posted-talk .right a:after, .profile .activitya:after, .wall .wrapper-child:before, .enquete .list-optinput:checked ~ label:after, .enquete .list-optlabel.active:after, .enquete .list-qa .talk:after, .enquete .right a:after, .enquete .box-pager .btn:after {display: block;content: "";}output.css
  • (^o^)
  • .has-fake {position: relative;}.has-fake:after {position: absolute;display: inline-block;content: "";}ex2.htmlex2.css
  • However, not all semantics needto be content-derived.Nicolas Gallagher @necolas 02, August, 2012
  • climax
  • Compass
  • compass-style.org