Note that there are some explanatory texts on larger screens.

plurals
  1. POSASS: how to use cross-file extension?
    primarykey
    data
    text
    <p>I have couple of sass files:</p> <ul> <li><code>_common.sass</code> - everything that is used globally, including variables, mixins etc.</li> <li><code>partials/_partial.sass</code> - partial styles</li> <li><code>homepage.sass</code> - homepage specific</li> </ul> <p>Now the problem:</p> <p>If I import <code>_common.sass</code> into the <code>partial/_partial.sass</code> and then import <code>partials/_partial.sass</code> into the <code>homepage.sass</code>, well, <code>_common.sass</code> gets compiled twice. Bad.</p> <p>The whole point is that the <code>homepage.sass</code> has to reference the <code>_common.sass</code>, so it could extend global class definitions and use mixins and os on, as well as the <code>_partial.sass</code> has to have access to global things from <code>_common.sass</code>. But <code>_partial.sass</code> itself has to be imported into the <code>homepage.sass</code>. </p> <p>Sounds something very simple and unworthy, but Im having hard times solving that puzzle.</p> <h1>Edit (to clear things out):</h1> <pre><code>// _common.sass .sprite background: url(sprite.png) // _partial.sass @import "common" .link @extend .sprite // homepage.sass @import "common" .social @extend .sprite @import "partials/partial" </code></pre> <p>As you can see that both homepage and partial extend global class <code>.sprite</code>. This is what I'm trying to achieve. But in the end, homepage gets the whole content of <code>_common.sass</code> compiled per nested import (2 times, in particular example)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload