title: Compiling sass files in their respective project directories using a design system as source
body: <p>I'm using jekyll as a platform for a design system. At the same time, I have a directory where I share prototypes and work in progress—on their own directories, using the design system framework——SASS files.</p>
  
  <p>So, what I want to do is compile the .scss files in this directories I use for prototypes, generating an <code>app.scss</code>and this file importing the .scss files from the design system.</p>
  
  <p>What I've found so far is that putting the front matter tripple dash at the begining of the file it will execute it as if it was in the _sass file, but that doesn't seem to import the .scss in the _sass directory in to the project directory.</p>
  
  <p>This is the directory structure I have so far that I ideally want, but is not working:</p>
  
  <pre><code>jekyll-project/
  ├── _includes/
  ├── _layouts/
  ├── _site/
  ├── _sass/
  |   └── design-system.scss
  |       ├──Components
  |          └── component_1.scss
  |          └── component_2.scss
  |          └── ...
  └── css/
  │   └── main.scss // this is what gets compiles from the _sass directory
  ├── projects/
      └── project_1
          └── scss
              └── app.scss // here this file will compile it's own styles to CSS + import the design-system.scss from the _sass directory in:
          └── css
              └── app.css
      └── project_2
          └── scss
              └── app.scss
          └── css
              └── app.css
      └── project_3
          └── ...
  ├── _config.yml
  └── index.html
  </code></pre>
  
  <p>In the scss file in the project_1 folder—-and the others as well—-what I want compiled in the app.scss file:</p>
  
  <pre><code>1st: the compiled design-system.scss
  +
  2nd: the styles writen in app.scss
  </code></pre>
  
  <p>Many thanks in advance and hopefully was able to illustrate the issue understandable enough.</p>