Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TIL 
about PostCSS mixins

051dbe29a972707cde167602b38c9778?s=47 Gunnar Bittersmann
December 02, 2019
Programming
0
25

TIL 
about PostCSS mixins

Lightning talk on how to get rid of duplicated code

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

December 02, 2019
Tweet

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
8
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
5
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
3
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
8
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
48
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
32
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
16
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
1
34
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
36

Other Decks in Programming

See All in Programming
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
1.4k
4a290dbd4f1c19bf2f25c2a230faf1bf?s=48 shirotamaki
0
240
9c87ec93b3b2aff85a03d3b56e7b8db8?s=48 makoga
0
390
F77032adcbe77d2777bb0e0c30873159?s=48 etagwerker
1
170
7975b9fd58c8945ae1c6b38747de7f28?s=48 line_developers_tw2
0
330
85d7f0ae00c0cf1092dffcec966e3ae9?s=48 mattak
27
16k
28410ec97da16f250a154d9b335c8a32?s=48 quannt
1
130
74b66d72163c42c8d157f325e3ebb45e?s=48 gamine
0
180
63c01564f6afe7af88d5d6981790457d?s=48 shomatan
0
260
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
110
270b0c7883545117a9a618dc7ca7cc83?s=48 xrdnk
0
490
D40b43d43c4d8307c5334f1cb1da03a2?s=48 devinjeon
3
1.3k

Featured

See All Featured
Ecdea9b9714877b86cee08458f085481?s=48 trallard
17
900
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
167
7.4k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
779
240k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.4k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1346
200k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
442
29k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
409
58k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
233
18k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
166
19k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
53
2.9k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
193
8.9k

Transcript

  1. TIL
 about PostCSS mixins

  2. &!--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; } } }

  3. @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; } } }

  4. @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 } } }

  5. @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 } } }

  6. @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 } }

  7. @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 } }

  8. @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 } }

  9. @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 } }

  10. @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 } }

  11. @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 } } }

  12. @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 } }

  13. @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 } }

  14. @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 } }