Search code examples
cssvariablesimportcodekit

Importing .kit file (variables) into .kit file (css)

I'm using a .kit file to hold variables to make it easy to change up as a template. Importing the .kit file into my index.html file has no issues, but in order for the variables to also work in my css file, I have to import it there as well which seems to break the first declaration.

<!-- @import "../include/variables.kit"-->

.alt-section {
  background: <!--$bgcolor-->;
}

I was thinking that this must have something to do with how comments work with with css files but I'm not really sure how to get around this. I thought about adding a ";" to my code after the import to make the code think it was a new declaration, but that didn't work, so for now I had to just double up on the code like:

<!-- @import "../include/variables.kit"-->

  .alt-section {
    background-color: <!--$bgcolor-->;
  }
  .alt-section {
    background-color: <!--$bgcolor-->;
  }

Is there a better way to solve this problem? Also, is there a way to not have to import the file into every .kit file that I need to use the variables? I noticed that if I didn't import, it would not compile correctly. (I'm not using SASS)

Solution

  • I figured out that the import tag inserted into a css document gets included into the first declaration because there is no end to it and it acts like it's part of the declaration. I simply put css comment tags on the import itself which allowed the variables to still be inserted into the kit file, but did not "show" the import tag itself, thus not disrupting the rest of the code. It ended up looking like:

    /*<!-- @import "../include/variables.kit"-->*/

  .alt-section {
   background-color: <!--$bgcolor-->;
 }

    This solves any problems I had needed to import the variables into each file the variables were needed in.