Skip to main content

How to declare a context of the sub-element?

.context >The selector you want to insert .component .elementThe element you want to style

See example​

.modal >The selector you want to insert .btn .iconThe element you want to style
+component('.btn')
  +register
    +context('.modal >')
    +element('.icon')

  display: inline-block

  +______________________
  +element('.icon')
    +default
      display: inline-flex
      font-size: 1.25em

    +context('.modal >')
      font-size: 0.75em




.btn {
  display: inline-block;
}


.btn .icon {
  display: inline-flex;
  font-size: 1.25em;
}

.modal > .btn .icon {
  font-size: 0.75em;
}

More info: +context, +default, +element, +register, +component, separator +___