How to declare a media query on current selector?

@media (min-width: 992px) {The selector you want to insert current-selectorThe element you want to style { ... } }

Option 1

SASS

+component('.btn')
  +register
    +responsive('@media (min-width: 992px)')
    +element('.icon')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey
    
    +responsive('@media (min-width: 992px)')
      background-color: red

CSS

.btn {
  display: inline-flex;
}

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

@media (min-width: 992px) { 
  .btn .icon {
    background-color: red;
  }
}

More info: +responsive, +element, +register, +component, separator +___

Option 2 - better with alias

SASS

+component('.btn')
  +register
    +variant('.primary')
    +responsive('{>md}', '@media (min-width: 992px)')
    +element('.icon')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey
    
    +variant('.primary')
      +default
        background-color: orange

      +responsive('{>md}')
        background-color: red

CSS

.btn {
  display: inline-flex;
}

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

.btn.primary .icon {
  background-color: orange;
}

@media (min-width: 992px) { 
  .btn.primary .icon {
    background-color: red;
  }
}

More info: +responsive, +variant, +element, +register, +component, separator +___

Option 3 - event better with global responsive

SASS

/* File: _common.sass */

// Register all common media queries here
+global-responsive('{>md}', '@media (min-width: 992px)')


// ________________________________________

/* File: btn.sass */

@import "common"

+component('.btn')
  +register
    +variant('.primary')
    +responsive('{>md}') // just the alias is enough here
    +element('.icon')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey
    
    +variant('.primary')
      +default
        background-color: orange

      +responsive('{>md}')
        background-color: red

CSS

.btn {
  display: inline-flex;
}

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

.btn.primary .icon {
  background-color: orange;
}

@media (min-width: 992px) { 
  .btn.primary .icon {
    background-color: red;
  }
}

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