Writing inherited state inside selector

[nolledgeable]

Hi Sass team,

One of the features I love most about Sass is that you can write your media queries directly in to the selector they should apply to. It makes responsiveness so much easier to write and read. It got me thinking why this can't be the same for state. Consider the following examples:

When a button with a nested icon is hovered, the icon should change it's styles. So the icon is 'inheriting state' from the button which is being hovered. To do this, I find myself writing something like this:

.button {
  // Button styles
  
  .icon {
    // Icon styles
  }
  
  &:hover {
  	
    .icon {
      // Icon styles on button hover
    }
  }
}

I've been working on a mixin that lets you write this in the following way:

.button {
  // Button styles
  
  .icon {
    // Icon styles
  	
    @include state("hover", ".button") {
      // Icon styles on button hover
    }
  }
}

Another use case is when say a modal is activated. You might want styles to change on multiple elements, so instead of adding a state class like 'is-active' directly to the modal you add it to an element further up the DOM. For example:

body {
    // Body styles
  
    &.modal-is-active {
      // Body styles on active modal
  	
      .modal {
        // Modal styles on active modal
      }
  	
      .overlay {
        // Overlay activates on active modal
      }
  }
}

In almost any css architecture the body, modal and overlay selectors would probalby be in different files. This leaves you with the choice in which file to write your state code. With the mixin you could write it like this and by doing so keeping all styles of a selector in the same file:

// base.scss
body {
  // Body styles
  
  @include state("modal-is-active") {
    // Body styles on active modal
  }
}

// modal.scss
.modal {
  // Modal styles
  
  @include state("modal-is-active", "body") {
    // Modal styles on active modal
  }
}

// overlay.scss
.overlay {
  // Overlay styles
  
  @include state("modal-is-active", "body") {
    // Overlay styles on active modal
  }
}

I hope I clarified the concept. If not, please check out the mixin or ask me and I will try to explain further. I am really seeing the code organising/readability benefits and I am very curious if you guys feel the same! Could this be a part of Sass natively? Maybe something in the following lines:

.parent {
  // Button styles
  
  .child {
    // Icon styles
  	
    @state hover, is-active on .parent {
      // Child styles on parent :hover or .is-active states
    }
  }
}

Cheers!

[nex3]

I think this is a great use-case for a mixin, but it's probably too complicated for a dedicated language feature. We try to keep those simple so they can be building blocks for more complicated user-created styles.