title: Import css/scss file into a class
body: <p>I have a problem. I'm using vaadin inside liferay. I've successfully written a fully responsive (yeah, tables too) theme for vaadin, based on bootstrap. Now I'm importing it to liferay. Everything went fine 'till I needed to upgrade Liferay, where their new responsive theme is using same classes name as bootstrap, but with different behaviour (sad, very sad face). </p>
  
  <p>The solution I've thought so far is to apply a class to the vaadin compiled css, like:</p>
  
  <pre><code>.daVaadinTheme {
      @import bootstrap.css;   
  }
  </code></pre>
  
  <p>so the content will be compiled like:</p>
  
  <pre><code>.daVaadinTheme h1.insideTheFile{
  
  }     
  .daVaadinTheme h2.insideTheFile{
  
  }
  </code></pre>
  
  <p>But, as you may figured out, is not obviously working. </p>
  
  <p>Do you have any solution?</p>
  
  <p>Read carefully! This is NOT a duplicate of the answer you've posted. I'm trying to import a CSS file inside a CSS/SCSS class of another file, like the example I've written above. My problem is not to simply import a CSS file inside another one...</p>
  
  <p><strong>SOLUTION:</strong> (kudos to Mathias Jørgensen)</p>
  
  <p>using @import from another scss file:</p>
  
  <p>in test.scss:</p>
  
  <pre><code>.daVaadinTheme{
      @import "bootstrap.scss";
  }
  </code></pre>