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.3k
CSS Study Group 1
kerrick
0
1.3k
Services & Component Collaboration
kerrick
0
770
Donate STL #Build4STL Hackathon Keynote
kerrick
0
360
Donate STL
kerrick
0
810
TDD With Ember.js
kerrick
0
1.1k
JavaScript Promises - Thinking Sync in an Async World
kerrick
20
7.9k
Other Decks in Programming
See All in Programming
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
250
PipeCDのプラグイン化で目指すところ
warashi
1
250
VS Code Update for GitHub Copilot
74th
2
600
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
Porting a visionOS App to Android XR
akkeylab
0
230
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
640
RailsGirls IZUMO スポンサーLT
16bitidol
0
160
WindowInsetsだってテストしたい
ryunen344
1
230
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
XP, Testing and ninja testing
m_seki
3
220
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
The Language of Interfaces
destraynor
158
25k
Embracing the Ebb and Flow
colly
86
4.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
4 Signs Your Business is Dying
shpigford
184
22k
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