title: styled-components local variable
body: <p><strong>Coming from <em>SCSS</em> (<em>SASS</em>)</strong> </p>
  
  <p>What would be the appropriate <em>Styled-Components</em> implementation of the below <em>SCSS</em> code?</p>
  
  <h3>SCSS:</h3>
  
  <pre><code>.circle{
    $size: 16px;  // &lt;-- SCSS FTW. use such a trick in styled-components
  
    height: $size;
    width: $size;
    .. rest of properties...
  }
  </code></pre>
  
  <h3>Currently the <em>styled-component</em> (<code>Circle</code>) looks like this:</h3>
  
  <pre><code>...lots of other styled exports
  
  export const Circle = styled.div`
    height: 16px;
    width: 16px;
    background: red;
    border-radius: 50%;
  `
  
  ...lots of other styled exports
  </code></pre>
  
  <p>Problem is, I want to keep that "meaningless" <code>size</code> variable in the same context where it's consumed (just like in <em>SCSS</em>) because nothing else cares or will ever care about it. I don't think dumping a variable somewhere and then using it with <code>'${size}'</code> is a "clean" way. such tactics are petty and promote messy code-base.</p>