title: Target attribute values in SASS
body: <p>I use attribute modules in my HTML and SASS because it's very logical. Currently, I may have markup like this:</p>
  
  <pre><code>&lt;article data-post="wrap feature"&gt;
    &lt;h1 data-post="title feature"&gt;Feature title&lt;/h1&gt;
  &lt;/article&gt;
  
  &lt;article data-post="wrap"&gt;
    &lt;h1 data-post="title"&gt;Normal title&lt;/h1&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>The SASS would look something like this:</p>
  
  <pre><code>[data-post] {
    font-size: 15px;
    color: black; }
  
  [data-post~="title"] {
    font-size: 20px; }
  
  [data-post~="title"][data-post~="feature"] {
    font-size: 30px; }
  </code></pre>
  
  <p>Works fine, but I'm wondering if it's possible in SASS to nest these. They all apply to the <code>[data-post]</code> so I want to target attributes within that. I'm imagining something like this (which obviously doesn't work):</p>
  
  <pre><code>[data-post] {
    font-size: 15px;
    color: black;
  
    &amp;[~="title"] {
      font-size: 20px; }
  
    &amp;[~="title"]&amp;[~="feature"] {
      font-size: 30px; }
  }
  </code></pre>
  
  <p>This would be more logical, more DRY and easier to code/maintain.</p>