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
40
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
74
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
57
3 Fehler sind zu finden
gunnarbittersmann
0
70
TIL that the future :has already begun
gunnarbittersmann
0
61
TIL how to clear floats
gunnarbittersmann
0
59
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
66
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
66
The color rebeccapurple
gunnarbittersmann
0
81
Mehrsprachige Websites
gunnarbittersmann
0
75
Other Decks in Programming
See All in Programming
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
270
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
760
ONE WEDGE_company_guide
1wedge_one
0
470
Goのmultiple errorsについて (2024年4月版)
syumai
3
670
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
830
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
新宿ダンジョンを可視化してみた
satoshi7190
2
250
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
Goのエラースタックトレースの歴史と今後
sonatard
7
1.2k
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
Featured
See All Featured
A Tale of Four Properties
chriscoyier
151
22k
Web development in the modern age
philhawksworth
202
10k
Rails Girls Zürich Keynote
gr2m
91
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Building Applications with DynamoDB
mza
88
5.6k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Become a Pro
speakerdeck
PRO
11
4.5k
Adopting Sorbet at Scale
ufuk
68
8.6k
Producing Creativity
orderedlist
PRO
337
39k
Designing with Data
zakiwarfel
96
4.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
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 } }