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
1.9k
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.7k
Hello DocPad
shirokuro331
2
2k
Other Decks in Design
See All in Design
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
540
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
790
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
690
Haruki_Konaka_Portforio.pdf
haruki556
0
800
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
290
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
170
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.6k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
160
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
180
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
380
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.3k
最速[要出典]アクセシビリティチェック
magi1125
2
130
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
450
Speed Design
sergeychernyshev
25
670
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
A better future with KSS
kneath
238
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Rails Girls Zürich Keynote
gr2m
94
13k
Optimizing for Happiness
mojombo
376
70k
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