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
CSS Study Group 2
Search
Kerrick Long
October 30, 2014
Programming
1
1.1k
CSS Study Group 2
Kerrick Long
October 30, 2014
Tweet
Share
More Decks by Kerrick Long
See All by Kerrick Long
15 Things You Shouldn't Do In Ember Anymore
kerrick
0
1.1k
The ECMAScript formerly known as 6
kerrick
0
1.2k
CSS Study Group 1
kerrick
0
1.2k
Services & Component Collaboration
kerrick
0
760
Donate STL #Build4STL Hackathon Keynote
kerrick
0
340
Donate STL
kerrick
0
810
TDD With Ember.js
kerrick
0
1.1k
JavaScript Promises - Thinking Sync in an Async World
kerrick
20
7.7k
Other Decks in Programming
See All in Programming
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
390
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
190
快速入門可觀測性
blueswen
0
500
.NETでOBS Studio操作してみたけど…… / Operating OBS Studio by .NET
skasweb
0
120
php-conference-japan-2024
tasuku43
0
430
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
560
Beyond ORM
77web
11
1.6k
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
10
5.1k
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
1.3k
HTML/CSS超絶浅い説明
yuki0329
0
190
선언형 UI에서의 상태관리
l2hyunwoo
0
270
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Cult of Friendly URLs
andyhume
78
6.1k
Embracing the Ebb and Flow
colly
84
4.5k
Typedesign – Prime Four
hannesfritz
40
2.5k
A designer walks into a library…
pauljervisheath
205
24k
Docker and Python
trallard
43
3.2k
Thoughts on Productivity
jonyablonski
68
4.4k
4 Signs Your Business is Dying
shpigford
182
22k
RailsConf 2023
tenderlove
29
970
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Transcript
CSS3 & SASS CSS STUDY GROUP WITH COMPASS
Kerrick Long Things I make and do Where to find
me online meetup.com/STLEmber Lead Front-end Developer at Second Street www. .com twitter.com/KerrickLong github.com/Kerrick
selector { -prefix-property: value; selector { @include mixin($arg: 3); }
}
CSS 3
CSS LEVEL 3 MEDIA QUERIES
None
None
/* small-screen styles */ .header { width: 100%; } @media
(min-width: 481px) { /* large-screen styles */ .header { width: 50%; } }
@media (min-width: 481px) { .header { width: 50%; } }
LOGICAL IF
@media (min-width: 481px) and (max-width: 1280px) { .header { width:
50%; } } LOGICAL AND
@media (min-width: 481px), (max-width: 1280px) { .header { width: 50%;
} } LOGICAL OR
@media not all and (min-width: 481px) { .header { width:
50%; } } LOGICAL NOT
CSS LEVEL 3 VENDOR PREFIXES
None
None
.button, button { border-radius: 3px; }
.button, button { border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius:
3px; }
.button, button { border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius:
3px; }
CSS LEVEL 3 MODULES
CSS 3 BACKGROUNDS
CSS 3 BACKGROUNDS
CSS 3 BACKGROUNDS
CSS 3 FONTS Web-safe Fonts
CSS 3 FONTS Awesome Fonts! @font-face { font-family: 'Jazz'; src:
url('jazz.woff') format('woff') }
CSS 3 BORDER-RADIUS
CSS 3 BOX-SHADOW
CSS 3 OPACITY
SASS
SASSY CSS NESTING
NESTING BASICS .foo { color: blue; .bar { color: red;
} } .foo { color: blue; } .foo .bar { color: red; }
NESTED PARENT SELECTOR .foo { color: blue; &:hover { color:
red; } } .foo { color: blue; } .foo:hover { color: red; }
NESTED PARENT SELECTOR .foo { color: blue; .baz & {
color: red; } } .foo { color: blue; } .baz .foo { color: red; }
NESTED @AT-ROOT .foo { color: blue; @at-root .bar { color:
red; } } .foo { color: blue; } .bar { color: red; }
NESTED MEDIA QUERIES .foo { color: blue; @media (screen) {
color: red; } } .foo { color: blue; } @media (screen) { .foo { color: red; } }
SASSY CSS VARIABLES
VARIABLES $red: #f01903; .foo { color: $red; } .bar {
background: $red; } .foo { color: #f01903; } .bar { background: #f01903; }
VARIABLE SCOPE $red: #f01903; .foo { $red: #a12014; color: $red;
} .bar { background: $red; } .foo { color: #a12014; } .bar { background: #f01903; }
VARIABLE DEFAULT $red: #f01903; .foo { $red: #a12014 !default; color:
$red; } .bar { background: $red; } .foo { color: #f01903; } .bar { background: #f01903; }
SASSY CSS @EXTEND
@EXTEND .foo { color: red; } .bar { @extend .foo;
} .foo, .bar { color: red; }
@EXTEND EVERYWHERE .foo { color: red; &:hover { border: 0
} } .bar { @extend .foo; } .foo, .bar { color: red; } .foo:hover, .bar:hover { border: 0; }
SASSY CSS @IMPORT
@IMPORT @import "bar"; .foo { color: red; } .bar {
color: blue; } .bar { color: blue; } .foo { color: red; } _bar.scss foo.scss foo.css
@IMPORT foo.scss _bar.scss foo.css
SASSY CSS MIX-INS
USING MIX-INS .foo { @include button(3px); } .foo { border-radius:
3px; display: inline-block; /* etc. */ }
CREATING MIX-INS @mixin button($radius) { border-radius: $radius; display: inline-block; /*
etc. */ }
DEFAULT ARGUMENTS @mixin button($radius: 3px) { border-radius: $radius; display: inline-block;
/* etc. */ } .button { @include button } .round { @include button(8px) } .button { border-radius: 3px; display: inline-block; /* etc. */ } .round { border-radius: 8px; display: inline-block; /* etc. */ }
NAMED ARGUMENTS @mixin foo($a, $b) { /* stuff */ }
.bar { @include foo($b: 1); } .baz { @include foo($b: 1, $a: 2); } .bar { /* stuff */ } .baz { /* stuff */ }
SASSY CSS SASS SCRIPT
NESTING BASICS "string #{$interpolation}" 10 * 10 <= 150 //
true @if (true) { /* stuff */ } @else if { /* other stuff */ } @else { /* more stuff */ }
COMPASS
COMPASS STYLE CSS 3
CSS3 PREFIX MIX-INS @import "compass/css3"; .foo { @include border-radius(3px); }
.foo { border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
CSS3 PREFIX MIX-INS Animation Appearance Background Size Box Shadow Box
Sizing Font Face Filter Opacity Transform Transition Text Shadow Columns
COMPASS STYLE HELPERS
CSS3 PREFIX MIX-INS .foo { background: image-url('a.png'); } .foo {
background: url('// media.secondstreet.com/ StaticContent/images/a.png'); }
COMPASS UTILITIES Saturation Lightness Color Stops Prefixes Inline Images Font
Face √ Tint sin/cos/tan Enumerate Image URL Font Files
None