Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
TIL about PostCSS mixins
Gunnar Bittersmann
December 02, 2019
Programming
0
22
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
gunnarbittersmann
0
42
gunnarbittersmann
0
17
gunnarbittersmann
0
11
gunnarbittersmann
1
30
gunnarbittersmann
0
32
gunnarbittersmann
2
19
gunnarbittersmann
0
25
gunnarbittersmann
0
51
gunnarbittersmann
0
63
Other Decks in Programming
See All in Programming
layzee
1
180
osyo
0
280
danilop
0
260
takara9
0
150
oleindesign
1
200
minamijoyo
3
460
grapecity_dev
1
180
neripark
3
560
suzukiot
0
250
prof18
0
240
zwass
0
350
manfredsteyer
PRO
0
180
Featured
See All Featured
rocio
155
11k
tanoku
86
8.5k
phodgson
87
3.9k
danielanewman
1
510
garrettdimon
287
110k
tammielis
237
23k
lara
590
61k
chrislema
173
14k
jasonvnalue
82
8.1k
chriscoyier
145
20k
bkeepers
408
58k
davidbonilla
70
3.6k
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 } }