Generated by SassMeister.com.

SassMeister-input-HTML.html

<article>
<header>
<h1>
    meta
</h1>
</header>
<ul class="grid3">
    <li>
        <div class="grid-content 1">
            Column 1
        </div>
    </li>
    <li>
        <div class="grid-content 1">
            Column 2
        </div>
    </li>
    <li>
        <div class="grid-content 1">
            Column 3
        </div>
    </li>
</ul>
<article>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$name: foo;
$attr: border;

p.#{$name} {
  #{$attr}-color: blue;
}

SassMeister-output.css

p.foo {
  border-color: blue;
}

SassMeister-rendered.html

<article>
<header>
<h1>
    meta
</h1>
</header>
<ul class="grid3">
    <li>
        <div class="grid-content 1">
            Column 1
        </div>
    </li>
    <li>
        <div class="grid-content 1">
            Column 2
        </div>
    </li>
    <li>
        <div class="grid-content 1">
            Column 3
        </div>
    </li>
</ul>
<article>