Process css with twig

Archive
1

In the theme I’m working on, I have two types of pages that differ in their color palette and in the font that is used, i.e. several css-classes need to have different color and font-style properties.´

At first, I tried to use two stylesheets where I defined variables that reflect the colors and fonts for each page type. Depending on the current page type, one or the other stylesheet was loaded in the header and all subsequent stylesheets simply used the variables with the respective colors assigned. The beauty of this is that I can use the same stylesheets, except the two that define the variables.

However, I learned that certain versions of Chrome (not to speak of IE) don’t process variables correctly, among them recent ones such as Chrome 54 on my cell phone.

The new idea now is using twig instead of using css-variables. Essentially, I want to do something like

#foo h1 {
color: {{page.mainColor}};
}

Is it possible to use the twig engine on .css-files with Grav?

2

An easy option is to add a class depending on the page type on the body tag (or in a container tag) in base.html.twig, and add the style bits accordingly.

3

That is my current fall-back option, in fact.

The problem is, I have many different container tags which I would have to adjust for this solution to work. My pages have css-classes that all contain both positioning (margin, display, etc) and styling (colors, fonts). Elements on the two types of pages receive the same postioning, but different styling, and the styling differs between classes, too. If it was just about the background color of the body it would be simple, but the way it is, with this solution I will effectively end up with two stylesheets for each page type with the same classes that contain (redundant) positioning and different styling in each case.

That will work of course, but it would make my life much easier if I could use twig to process css-files. In the end it’s both text.

Of course, any other solution that doesn’t hinge on css-variables is welcome, too.

4

You could just process the CSS “inline” with Twig, for example:

<style>
#foo h1 {
color: {{ page.mainColor }};
}
</style>

And place that in the relevant templates.

More elegant would be as normal CSS, however, in which SASS/LESS/Styles would save you a lot of time and the differentiation between classes be non-significant in load times. Set up CSS with common specifications as you normally would, then in Twig do as Flaviocopes suggest and add a class to <body> matching the template.

When considering one heavier or two CSS-stylesheets, the former is better.

5

Sounds like a good plan. Thanks for the advise. I’ll be traveling the next couple of days, but I’ll let you know my final solution as soon as possible.

6

SASS compiled into one stylesheet (or rather two different ones) that get loaded depending on the current page type did the job. Thanks for your suggestions!