TIL about PostCSS mixins
A presentation at Tech Talk @ Tagesspiegel in December 2019 in Berlin, Germany by Gunnar Bittersmann
TIL about PostCSS mixins
&!—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; } }
@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; } }
@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 } } }
@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 } } }
@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 }
@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 }
@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 }
@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 }
@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 }
@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 } }
@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
@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
@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
