title: Sass within WordPress
body: <p>I'd like to use SASS in one of my wordpress projects (which will be kind of a boilerplate for future projects). I wish to do this in a way that follows the following criteria:</p>
  
  <ul>
  <li>Passess sass-lint</li>
  <li>Follows Wordpress standards (e.g. theme headers)</li>
  <li>Clean, Consistent &amp; Easy to maintain</li>
  </ul>
  
  <p>I had a few ideas, but none of them follows the above criteria.</p>
  
  <h2>1. Remove <code>style.css</code> and solely use Sass</h2>
  
  <pre><code>/index.php
  /... other wordpress files ...
  /assets/sass/main.scss
  /assets/sass/...other sass files...
  </code></pre>
  
  <p>After running <code>sass</code> the <code>style.css</code> will be created in the root directory.</p>
  
  <p><strong>Pros:</strong></p>
  
  <ul>
  <li>Consistency</li>
  <li>Easy to maintain</li>
  </ul>
  
  <p><strong>Cons:</strong></p>
  
  <ul>
  <li>SCSS-Lint doesn't like the "WordPress theme header comment", since it prefers <code>//</code> comments</li>
  <li>Without compiling sass it's impossible to select the theme in the WordPress backend</li>
  </ul>
  
  <h2>2. Use the <code>style.css</code> and Sass simultaneously</h2>
  
  <pre><code>/index.php
  /style.css
  /...other wordpress files...
  /assets/sass/main.scss
  /assets/sass/... other sass files...
  </code></pre>
  
  <p><strong>Pros:</strong></p>
  
  <ul>
  <li>Basically solves the cons of (1)</li>
  <li>Even it shouldn't be that way; quick changes can be easily added to the <code>style.css</code> without any tools</li>
  </ul>
  
  <p><strong>Cons:</strong></p>
  
  <ul>
  <li>Inconsistency</li>
  <li>Redundancy</li>
  <li>Requires multiple CSS requests (one for <code>style.css</code>, one for the compiled sass)</li>
  </ul>
  
  <p>Also my biggest problem here is: where to put the compiled SASS? Concatenating it with the <code>style.css</code> seems fairly odd.</p>
  
  <p>Any ideas? Thanks!</p>