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}
{
  &-category
  {
    color: green;
    
    &-posts
    {
      color: red;
    }
    
    .#{$prefix}
    {
      &-category
      {
        &-posts
        {
          color: blue;
        }
      }
    }
  }
}

SassMeister-output.css

.foo-category {
  color: green;
}
.foo-category-posts {
  color: red;
}
.foo-category .foo-category-posts {
  color: blue;
}

SassMeister-rendered.html

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