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
370
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
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
430
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.5k
DataformでPythonする / dataform-de-python
snhryt
0
150
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
220
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
520
AI Ramen Fight
yusukebe
0
120
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.7k
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Being A Developer After 40
akosma
90
590k
A better future with KSS
kneath
238
17k
Practical Orchestrator
shlominoach
190
11k
What's in a price? How to price your products and services
michaelherold
246
12k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Why Our Code Smells
bkeepers
PRO
337
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
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