TIL 
about PostCSS mixins

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

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
1
11
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
20
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
2
12
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
19
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
45
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
37
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
38
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
27
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
230

Other Decks in Programming

See All in Programming
9e014a8c38462fcaf2c136e65837b348?s=48 free_world21
1
470
F62b70b58d2f54c3d421a8f19c1c8817?s=48 pictiny
3
170
1dde44a6055fe7b3511d5cb543d88cbe?s=48 ukyo
4
3.6k
44df43ecb9d8ae00cafee6b804db3fcd?s=48 kentatada
2
190
0aa238a274c2397214b20d6eed58939b?s=48 moomooya
2
380
C44d9ff0fb47045ae04e3183694c7d68?s=48 wafuwafu13
0
280
19d7ae634445d4bd9b10c7961a462260?s=48 shu223
8
780
27c093d0834208f4712faaaec38c2c5c?s=48 ramalho
1
130
9d1961575e45a8286cdde5f86dbba312?s=48 akatsuki174
4
410
0d04162c7a3c2907c059a06dbcd23cf4?s=48 tokorom
4
140
0a5d28eceda9a14b5b5f697b36620e8f?s=48 pddg
0
160
A49edf2521f9e75826c6546c7585f17a?s=48 tsuyukimakoto
3
350

Featured

See All Featured
Ecdea9b9714877b86cee08458f085481?s=48 trallard
9
370
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
69
1.3k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
257
24k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
195
9.5k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
215
16k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
68
3.4k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
55
5.2k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
324
14k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
652
54k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.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 } }