Skip to main content

How to declare a variant of component for pseudo-element?

.component.variantThe selector you want to insert .element::beforeThe element you want to style

See example​

.btn.largeThe selector you want to insert .icon::beforeThe element you want to style
+component('.btn')
  +register
    +variant('.large')
    +element('.icon')
      +pseudo-element('before')

  display: inline-flex

  +___________________
  +element('.icon')
    position: relative

    +_________________________
    +pseudo-element('before')
      +default
        font-size: 1em

      +variant('.large')
        font-size: 2em






.btn {
  display: inline-flex;
}

.btn .icon {
  position: relative
}

.btn .icon::before {
  font-size: 1em;
}

.btn.large .icon::before {
  font-size: 2em;
}

More info: +variant, +default, +pseudo-element, +element, +register, +component, separator +___