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
TIL about PostCSS mixins
Search
Gunnar Bittersmann
December 02, 2019
Programming
0
62
TIL about PostCSS mixins
Lightning talk on how to get rid of duplicated code
Gunnar Bittersmann
December 02, 2019
Tweet
Share
More Decks by Gunnar Bittersmann
See All by Gunnar Bittersmann
Responsive typography 2
gunnarbittersmann
0
130
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
87
3 Fehler sind zu finden
gunnarbittersmann
0
150
TIL that the future :has already begun
gunnarbittersmann
0
100
TIL how to clear floats
gunnarbittersmann
0
94
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
110
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
94
The color rebeccapurple
gunnarbittersmann
0
150
Mehrsprachige Websites
gunnarbittersmann
0
97
Other Decks in Programming
See All in Programming
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
730
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
170
QA x AIエコシステム段階構築作戦
osu
0
210
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
140
JetBrainsのAI機能の紹介 #jjug
yusuke
0
110
What's new in Adaptive Android development
fornewid
0
120
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
290
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
370
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.7k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Site-Speed That Sticks
csswizardry
10
720
The Invisible Side of Design
smashingmag
301
51k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Cult of Friendly URLs
andyhume
79
6.5k
Designing for Performance
lara
610
69k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How GitHub (no longer) Works
holman
314
140k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Transcript
TIL about PostCSS mixins
&!--right-inline .metainfo!__text:first-child { @media (!--media-sm-down) { > * { display:
inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em; font-weight: normal; } } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { &, > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em; font-weight: normal; } } }
@define-mixin metainfo-separator { content: '|'; padding: 0 0.25em; font-weight: normal;
} &!--right-inline .metainfo!__text:first-child { @media (!--media-sm-down) { > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em; font-weight: normal; } } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { &, > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em; font-weight: normal; } } }
@define-mixin metainfo-separator { content: '|'; padding: 0 0.25em; font-weight: normal;
} &!--right-inline .metainfo!__text:first-child { @media (!--media-sm-down) { > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { @mixin metainfo-separator } } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { &, > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { @mixin metainfo-separator } } }
@define-mixin metainfo-separator { content: '|'; padding: 0 0.25em; font-weight: normal;
} &!--right-inline .metainfo!__text:first-child { @media (!--media-sm-down) { > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { @mixin metainfo-separator } } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { &, > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { @mixin metainfo-separator } } }
@define-mixin metainfo-separator { .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em;
font-weight: normal; } } &!--right-inline .metainfo!__text:first-child { @media (!--media-sm-down) { > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ @mixin metainfo-separator } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { &, > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ @mixin metainfo-separator } }
@define-mixin metainfo-separator { .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em;
font-weight: normal; } } &!--right-inline .metainfo!__text:first-child { @media (!--media-sm-down) { > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ @mixin metainfo-separator } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { &, > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ @mixin metainfo-separator } }
@define-mixin metainfo-separator { .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em;
font-weight: normal; } } &!--right-inline .metainfo!__text:first-child { @media (!--media-sm-down) { > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ @mixin metainfo-separator } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { & { display: inline; } > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ @mixin metainfo-separator } }
@define-mixin metainfo-separator { !/* when there’s no author image, render
metainfo text content inline !*/ > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em; font-weight: normal; } } &!--right-inline .metainfo!__text:first-child { @media (!--media-sm-down) { @mixin metainfo-separator } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { & { display: inline; } @mixin metainfo-separator } }
@define-mixin metainfo-separator { !/* when there’s no author image, render
metainfo text content inline !*/ > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em; font-weight: normal; } } &!--right-inline .metainfo!__text:first-child { @media (!--media-sm-down) { @mixin metainfo-separator } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { & { display: inline; } @mixin metainfo-separator } }
@define-mixin metainfo-separator { !/* when there’s no author image, render
metainfo text content inline !*/ > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em; font-weight: normal; } } &!--right-inline { @media (!--media-sm-down) { .metainfo!__text:first-child { @mixin metainfo-separator } } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { display: inline; } .metainfo!__text:first-child { @mixin metainfo-separator } } }
@define-mixin metainfo-separator { !/* when there’s no author image, render
metainfo text content inline !*/ .metainfo!__text:first-child { > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em; font-weight: normal; } } } &!--right-inline { @media (!--media-sm-down) { @mixin metainfo-separator } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { display: inline; } @mixin metainfo-separator } }
@define-mixin metainfo-separator { !/* when there’s no author image, render
metainfo text content inline !*/ .metainfo!__text:first-child { > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em; font-weight: normal; } } } &!--right-inline { @media (!--media-sm-down) { @mixin metainfo-separator } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { display: inline; } @mixin metainfo-separator } }
@define-mixin metainfo-inline { !/* when there’s no author image, render
metainfo text content inline !*/ .metainfo!__text:first-child { > * { display: inline; } !/* and when there’s slot content, put a separator after author credits !*/ .metainfo!__credits:not(:last-child)!::after { content: '|'; padding: 0 0.25em; font-weight: normal; } } } &!--right-inline { @media (!--media-sm-down) { @mixin metainfo-inline } } !/* when there’s no author image, render metainfo text content inline !*/ &!--inline .metainfo!__text:first-child { display: inline; } @mixin metainfo-inline } }