TLDR; Since asking this, I have provided a solution answering my own question. This is a way in October to go about loading multiple stylesheets - or parts of stylesheets - at the same time.

I am experimenting with my theme and I was wondering if there was a way to use a feature like @import (the way it was intended to be used) by calling a stylesheet within a stylesheet. For my specific example I think it would work fine this way because it is my intention to clean up my code.

For example:

I'd like to have my variables stylesheet have all the properties that a dev would modify. I've setup my colors using HSL and I have it setup in a way that there are only 3 values that need to be altered. However, using the chained css vars makes the code very difficult to read. I would like to do something like:

/* This is the var.css stylesheet */
:root {
  --var-h: 190;
  --var-s: 100%;
  --var-l: 100%;

  @import('../css/var-theme.css');
  /* This import would be all the complicated variables and calcs */

}

The stylesheet to import would have all the calculations and combinations of the variables that a dev wouldn't actually need to see all that often. That way the var stylesheet they would theoretically work out of most often would be "var.css" instead of the "var-theme.css". I tried using @import but I am guessing this is disabled in October due to the CMS having a certain way to achieve this? What might you do to extend a stylesheet?

Tags

css stylesheet dependency include dependencies @import includes

Last updated 3 years ago

Just so whomever visits this and has the same issue I was able to figure out A way (perhaps not THE way) to achieve this.

You go into your layout under the "code" tab - where the PHP is parsed - (or apparently you can also do this in pages) and you call (in my specific example)

function onStart() {
    $this->addCss(['assets/css/Vars/var.css', 'assets/css/Vars/var-theme.css']);
    $this->addCss('assets/css/general.css');
}

Notice the two manners of loading stylesheets. The first loads two at the same time - creating a pseudo dependency of sorts - the second loads only one. Can you spot the difference? Kind of clever the way I was able to achieve this. Maybe there is a better way, but this did a decent job of making my code easier to read. Here's how you setup the stylesheets:

Stylesheet #1 (contains the variables I am more likely to work with)

:root {
    --var-1: ;
    --var-2: ;

Stylesheet #2 (contains the variables that set each individual HSL value for my colors and calculations etc etc)

    --var-3: ;
    --var-4: ;
}

In case you didn't notice, start with the normal " :root { " in the first stylesheet but without the ending curly brace. Put the ending curly brace in the second stylesheet. Voila.

Again, I'm still fairly new to October (I come from a Wordpress background - never again), so if there is a better way to do this, please correct me. Hope someone finds this useful after all the useful shit I've found on stack overflow for free.

Last updated 3 years ago

Thanks for sharing your solution!

daftspunk said:

Thanks for sharing your solution!

Any feedback both positive or critical is appreciated. Hopefully I've done a pretty good job with keywords for indexing.