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
31

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
4
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
5
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
5
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
6
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
11
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
3
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
4
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
9
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
4

Other Decks in Programming

See All in Programming
575ca492bac55e895d0e1c86f7d709fe?s=48 hschwentner
3
1k
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
2
220
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
6
860
3f523bb4384468543d01a1d21029fc12?s=48 obregonia1
0
460
2594ac7ce91fd7d9a3ce71ca7cc2d0c0?s=48 d_date
8
1.3k
D5744e72b6a5e6673f991cab987a31ab?s=48 siketyan
2
140
E1b600a54e2e4c1fe276cfe71a4fb02a?s=48 currylike37
0
580
13d64bff196e33cc6b352f226137d16e?s=48 monoqlo
0
240
585b6bd646ae00cd1025309c912d922f?s=48 saten
5
790
0b8ad408b31cb9d5cff2828086c65d58?s=48 temoki
1
180
44f37c1fe3a6a56376bb41a338741355?s=48 ring
2
600
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
0
120

Featured

See All Featured
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
24k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
180
14k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
224
15k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.7k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
225
48k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
740
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
42
1.5k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
34
2.4k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
43
2k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
61k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
129
20k

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