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
22

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
42
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
17
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
11
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
1
30
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
32
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
2
19
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
25
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
51
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
63

Other Decks in Programming

See All in Programming
4f349dbe1d48627445735f7e2c818c97?s=48 layzee
1
180
3931098ae486b6df619050c63e24f6cc?s=48 osyo
0
280
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
0
260
B8d0f591da3869f3bb9d5473853be2a2?s=48 takara9
0
150
Dda24cce92447593513292ec748c70c4?s=48 oleindesign
1
200
5ade34f8bdf1b55c4ff82c11cf23cf42?s=48 minamijoyo
3
460
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
1
180
C11bce314c53f6d9e3096f121d96d7f9?s=48 neripark
3
560
50443a0c666aa1020f2f757582e6e45c?s=48 suzukiot
0
250
9da5d5cc4b6a9f28058152e28364b02a?s=48 prof18
0
240
33800dc7f40b28f182ad2b085de5daa9?s=48 zwass
0
350
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
180

Featured

See All Featured
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
86
8.5k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
87
3.9k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
510
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
287
110k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
237
23k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
61k
282d599b414022eba5096510f675b6e2?s=48 chrislema
173
14k
11c84dff30266b907714802088852677?s=48 jasonvnalue
82
8.1k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
145
20k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
58k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
70
3.6k

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