Generated by SassMeister.com.

SassMeister-input-HTML.html

<div data-color="red"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$prefix: 'foo';

.#{$prefix}
{
  &-bar
  {
    &-baz
    {
      &:hover,
      &:focus
      {
        color: red;      
      }
    }
    .#{$prefix}
    {
      &-baz
      {
        &:hover,
        &:focus
        {
          color: red;      
        }
      }
    }
  }
}

SassMeister-output.css

.foo-bar-baz:hover, .foo-bar-baz:focus {
  color: red;
}
.foo-bar .foo-baz:hover, .foo-bar .foo-baz:focus {
  color: red;
}

SassMeister-rendered.html

<div data-color="red"></div>