Skip to main content

How to declare a variant on parent element?

.component .parent-element.variantThe selector you want to insert .elementThe element you want to style
+component('.btn')
  +register
    +element('.icon')
      +variant('.highlight')
      +element('.prefix')

  display: inline-flex

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

    +___________________
    +element('.prefix')
      +default
        background-color: grey

      +variant('.highlight')
        background-color: red






.btn {
  display: inline-flex;
}

.btn .icon {
  position: relative;
}

.btn .icon .prefix {
  background-color: grey;
}

.btn .icon.highlight .prefix {
  background-color: red;
}

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