Cacher is the code snippet organizer for pro developers

element {
  opacity: 1;
}
element:hover, element:active, element:focus {
  opacity: .5;
}

element {
  opacity: 0;
}
.no-opacity element {
  visibility: hidden;
}

.no-opacity element {
  visibility: hidden;
}
.no-opacity element:hover, .no-opacity element:active, .no-opacity element:focus {
  visibility: visible;
}

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

/// Bind all events, including self state if `$self` is true.
/// @author Harry Roberts
/// @link https://github.com/csswizardry/csswizardry.github.com/blob/master/css/_tools.mixins.scss#L13 CSSWizardry
/// @param {Bool} $self - Include self state
/// @output `:hover`, `:active` and `:focus`
@mixin on-event($self: false) {
  // If $self is truthy, include self state
  @if $self {
    &, &:hover, &:active, &:focus { @content }
  }

  @else {
    &:hover, &:active, &:focus { @content }
  }
}

/// Define a context for the current selector
/// @author Hugo Giraudel
/// @param {String} $context - Context
/// @output `#{$context} & { ... }`
@mixin context($context) {
  #{$context} & {
    @content;
  }
}


// `on-event` test
element {
  opacity: 1;
  
  @include on-event {
    opacity: .5;
  }
}

// `context` test
element {
  opacity: 0;
  
  @include context('.no-opacity') {
    visibility: hidden;
  }
}

// You can also mix and match
// Although I would not recommend this
// since it can hurt readability.
element {
  @include context('.no-opacity') {
    visibility: hidden;
    
    @include on-event {
      visibility: visible;
    }
  }
}