Pro Yearly is on sale from $80 to $50! »

TIL 
about PostCSS mixins

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

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
9
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
8
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
1
22
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
28
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
2
16
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
23
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
48
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
58
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
48

Other Decks in Programming

See All in Programming
5f69045a2ca496221cfc624405917cdf?s=48 runningcode
1
180
4ab3fec3e82ddb19bcadd93ef909a443?s=48 syucream
0
1k
7005db6f5317ddce16d09591f70ea32c?s=48 hpprc
0
100
Bc142fbacf80354db09fe3dda44afcf1?s=48 nobonobo
0
130
83722380372c00bd75ac920f2089f6aa?s=48 zacky1972
0
200
1e72c797afb9bab65655a1eb7d183460?s=48 syobochim
0
130
9987516c273a7874b12b742e7aef828f?s=48 smellman
1
720
D331d219bbb80155f3687db8009984f0?s=48 kinkinkon1009
0
660
D65e990ab4df0d0a75c3b0ae5d036bc5?s=48 martinlippert
1
220
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
1
240
37b01da9150c1e789f35771b06d36890?s=48 morimorihoge
4
490
7d1521d950d9bc5697868830cb04ff2f?s=48 yimajo
0
100

Featured

See All Featured
9375a9529679f1b42b567a640d775e7d?s=48 schacon
145
6.5k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
258
16k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
4
490
5f50f94346fbcb23706f0707169317a4?s=48 aarron
256
36k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.7k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
92
13k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
113
25k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.1k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
500
36k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
267
16k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k

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