title: How to apply large external CSS files to only a specific region on the page - CSS Preprocessor failing
body: <p>I have two very large external stylesheets that I want to pull into my WordPress site. I want their styles to only be applied to content in a div with the ID of "pattern" - they should not affect any other content.</p>
  
  <p>I attempted to do this using PHP and <a href="http://lesscss.org/" rel="nofollow noreferrer">LESS</a> as follows.</p>
  
  <p>In the head of my document, I have:</p>
  
  <pre><code>&lt;style media="screen" type="text/less"&gt;
              #pattern {
                      &lt;?php echo file_get_contents('http://ace.staging.managebuilding.com/Manager/css/combinedSkin.css'); ?&gt; 
                      &lt;?php echo file_get_contents('http://ace.staging.managebuilding.com/Manager/css/combinedLess.css'); ?&gt;
                      p {color:#F00;}
              }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="&lt;?php echo get_template_directory_uri(); ?&gt;/js/less.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>When I comment out the two file_get_contents lines, LESS successfully processes the "p {color:#F00;} line and applies it to content inside the #pattern div.</p>
  
  <p>However when I attempt to pull in those two stylesheets, I get an error in less.js: <img src="https://i.stack.imgur.com/4kK0u.png" alt="less.js failed"></p>
  
  <p>I'm not sure what the error is, but my guess is that the CSS files (<a href="http://ace.staging.managebuilding.com/Manager/css/combinedSkin.css" rel="nofollow noreferrer">http://ace.staging.managebuilding.com/Manager/css/combinedSkin.css</a> , <a href="http://ace.staging.managebuilding.com/Manager/css/combinedLess.css" rel="nofollow noreferrer">http://ace.staging.managebuilding.com/Manager/css/combinedLess.css</a>) are too large for LESS to handle. How else can I achieve this? Also, note that those two CSS files will be updated regularly, and I want to pull in the most recent changes, so I want to link to the live files.</p>