Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sassと仲良くお付き合い
Search
Toshiaki Sasaki
May 18, 2013
Design
4
2k
Sassと仲良くお付き合い
2013年5月18日に開催された WCAF Vol.10 でのスライドです
Toshiaki Sasaki
May 18, 2013
Tweet
Share
More Decks by Toshiaki Sasaki
See All by Toshiaki Sasaki
脱残念Webデザイン CSS編
shirokuro331
4
1.6k
Let Fast Web Developing DocPad & Ghostlab
shirokuro331
2
6.8k
Hello DocPad
shirokuro331
2
2.1k
Other Decks in Design
See All in Design
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
400
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.8k
Memory Man v3 (WIP)
storybychad
PRO
0
2.5k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
460
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
660
CursorでAI活用のナレッジベースを構築する
kanzaki
0
670
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
370
株式会社バクタム 会社説明資料
bactum
0
330
Bulletproof Design System with TypeScript
takanorip
7
4k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.3k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
880
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
We Have a Design System, Now What?
morganepeng
53
7.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Producing Creativity
orderedlist
PRO
347
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Making Projects Easy
brettharned
117
6.4k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Music & Morning Musume
bryan
46
6.8k
Transcript
4BTTͱ ྑ͘ ͓͖߹͍ 2013.05.18ɹWCAF Vol.10 Toshiaki Sasaki (Web Designer at
ALLCONNECT,Inc.)
Toshiaki Sasaki Web Designer at ALLCONNECT.Inc. @shirokuro331
What’s Sass?
“Sass makes CSS fun again.
1. Sass 2. Compass 3. Case of Sass 4. Conclusion
AGENDA
What’s Sass?
Sass is CSS Preprocessor. .scss .css
None
http://sass-lang.com/
http://jsdo.it/
http://codepen.io/
Future?
4BTT $441SFQSPDFTTPS ɺ͍ͭ͏ͷʁ
ϋΠϋΠᵇ ʅшʆ ᵃ
Demo
$ gem install sass $ sass --watch scss:css
http://mhs.github.io/scout-app/
http://incident57.com/codekit/
Sublime Text 2 + Emmet
.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; }
.scss .css Valiables มΛ͏͜ͱ͕Ͱ͖Δ $secbottom: 30px; $basecolor: #cc0000; .block-a {
background: $basecolor; margin-bottom: $secbottom; } .block-a { background: #cc0000; margin-bottom: 30px }
.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; }
.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; }
.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; }
.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; }
.scss @import ෳͷTBTTϑΝΠϧΛDTTϑΝΠϧʹ݁߹͢Δ @import “common”; @import “reset”; @import “module”; style.scss
_common.scss _reset.scss _module.scss style.css style.scss
Speed up?
ܶతʹ࡞ۀεϐʔυ͕͔͋ͬͨͱ͍͏ͱͦ͏Ͱͳ͍ ࡞ۀεϐʔυͱ͍͏ΑΓɺޮԽΛҙࣝ͢ΔΑ͏ʹ %3:ͳઃܭΛߟ͑ΔΑ͏ʹͳͬͨ %3:ɾɾɾ%PO`U3FQFBU:PVSTFMG
݁4BTT͑ΔΑ͏ʹͳͬͯ࡞ۀޮ্͕ͬͨ
http://compass-style.org/
$ gem install compass
$ compass create folder_name
$ cd folder_name $ compass watch
.scss .css mixin ͋Β͔͡ΊNJYJO͕ͨ͘͞Μ༻ҙ͞Ε͍ͯΔ @import “compass/utilities/ general/clearfix”; .block { @include
clearfix; } .block { overflow: hidden; *zoom: 1; }
.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;
Sublime Text 2 + EmmetͰOK?
.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; }
CSS Sprite DTTͱը૾ΛࣗಈͰ࡞ͬͯ͘ΕΔ
.scss .css image-width ը૾ͷύε͔Β෯αΠζΛऔಘ͢Δ .icon { width: image-width(“path”); } .icon
{ width: 32px; }
.scss .css image-height ը૾ͷύε͔Βߴ͞αΠζΛऔಘ͢Δ .icon { height: image-height(“path”); } .icon
{ height: 32px; }
.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); }
Attention!
ෳਓͰͭͷϓϩδΣΫτͷ੍࡞Λߦ͏߹ɺ ͦͷਓ$PNQBTTʹ͍ͭͯͷཧղ͕ඞཁ ࢲҰ࠳ંͯ͠·͢ ձࣾͱ͔Ͱ͏߹ɺগͮͭ͠ಋೖ͕٢͔ͳͱࢥ͏
݁ͳΜʹͤΑ$PNQBTTศརʂ
ͱ͋ΔձࣾͰͷ4BTTͱͷ͓͖߹͍ํ
ϑΥϧμϑΝΠϧͷߏʁ
DBTF QW Q css _scss _common.scss _valiables.scss _module.scss style.css _spriteimage.scss
style.scss ɾ ɾ ɾ αΠτͷΈ ม ύʔπ $44εϓϥΠτ ֤ίϯςϯπ༻
css _scss compass_start.bat config.rb μϒϧΫϦοΫͰ@TDTTࢹ։࢝ ઃఆϑΝΠϧ
css _scss compass_start.bat config.rb μϒϧΫϦοΫͰ@TDTTࢹ։࢝ ઃఆϑΝΠϧ ͜ͷͭͷϑΝΠϧ͕͋ΕίϚϯυೖྗ͠ͳͯ͘ TBTTͷࢹฤू͕Մೳ
compass_start.bat(.command) compass watch #!/bin/bash htdocs=$(dirname $0) cd $htdocs compass watch
Windows Mac
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ͷԿߦ͔Λίϝϯτ͚ͭΔ
͍͠ͷͰ୭͔खͬͯཉ͍͠ ʀЧʆ
DBTF QW Q css _scss _common.scss _company.scss style.css _price.scss style.scss
ɾ ɾ ɾ _item.scss ҰͭͷDTTϑΝΠϧʹίϯύΠϧ͢ΔͷͰ ҧ͏TDTTϑΝΠϧΛෳਓͰ࡞ۀͯ͠େৎ style.css
css style.css 4BTT͑ͳ͍ਓී௨ʹDTTϑΝΠϧʹॻ͍ͯΒ͏ <link rel=”stylesheet” href=”css/style.css” /> <link rel=”stylesheet” href=”css/newcontent.css”
/>
ձࣾʢνʔϜʣͰͷಋೖ
উखʹͬͨࣗͰઌͯ͠Δ ୭͔Λר͖ࠐΉ ษڧձ͢Δ ֤ࣗͷϚγϯʹڧ੍తʹ4BTT$PNQBTTೖΕΔ DPOpHSCͱόονϑΝΠϧ༻ҙ͢Δ
Conclusion.
4BTT ʢ$44ϓϦϓϩηοαʣ Ͱޮతͳ։ൃ $PNQBTTศརʂ্खʹ͓͖߹͍͠·͠ΐ͏ ࠷ॳ͘͠ࢥ͏͔͚ͩͲ׳ΕΔͱϠϛπΩʹ ࠇ͍ը໘΄ͱΜͲΘͳͯ͘4BTT͑Δ Ͱࠇ͍ը໘ʹ׳ΕΑ͏
Enjoy Coding!
Thank you WCAF Vol.10 ʮWeb Designing for the Futureʯ @shirokuro331
IUUQDTTIBQQZMJGFDPNBSDIJWFT@QIQ ʲ4BTTΛ֮͑Α͏ʂʳ͘͡తͳͷͱࢀߟϦϯΫc$44)BQQZ-JGF $PNQBTTΛͬͯ4BTTͷ$44ग़ྗΛखܰʹ͠Α͏c4LZXBSE%FTJHO Resources IUUQXXXTLZXBSEEFTJHOOFUCMPHBSDIJWFTIUNM Photo Credit -VD7JBUPVS IUUQXXXMVDOJYCFNBJOQIQ