4

I'm using SCSS to write all of my styles and am currently using Codekit for processing it. I want to be able to add some global variables to Craft so I can change color and font vars, which would then be re-compiled into CSS for the site.

Looking through the plugins, I've found the Sprockets port (https://github.com/rkingon/Craft-Plugin--Sprockets/) and AutoMin (https://github.com/aelvan/AutoMin-Craft/). They both look like they'll take a bit to get set up so I wanted to see if I could get some input before I dive in.

My questions are:

  1. Is what I want to do possible? With either one or both, can I set vars in the CMS that are then pulled into a _config.scss file, which is in turn imported into my main.scss file, compiled, and then fed to the browser automatically? I've tried pulling a craft color var into the main css file but it did not replace the twig syntax with the hex color.

  2. Would one of the plugins is better suited to my needs than the other?

Brad Bell
  • 67,440
  • 6
  • 73
  • 143
idahotallpaul
  • 459
  • 5
  • 11

2 Answers2

3

I did the port of AutoMin to Craft, and I don't think what you want to do is possible with it. Maybe if you were somehow able to write a new file to disk, with the variables defined in it, and then feed that into the AutoMin, it could work. But seems like a pretty complicated solution.

I'm not sure exactly what you're trying to achieve, but in previous projects where I've let the user control colors and fonts on certain objects, I've just done it with pure CSS. If I wanted to let the client define the link color, I'd just do something like this in :

<style type="text/css">
    a { color: {{ myGlobal.linkColor }} }
</style>

And then not define the link color in my stylesheet.

But this is maybe too simplistic for what you're trying to do? :)

idahotallpaul
  • 459
  • 5
  • 11
André Elvan
  • 7,288
  • 22
  • 34
  • I've done what you describe for one off style changes for individual elements but in my scss files I set a few base colors for the site and then use sass functions to set a lot of things up. So I might have vars for primary, secondary and neutral colors. Using the lighten/darken sass functions, those colors are applied to many different elements in many different ways. Borders, backgrounds, buttons, hover states, etc. Would it be possible/advisable to move the sass files into templates and have it export to the css folder from there? – idahotallpaul Aug 21 '14 at 22:22
  • 1
    @idahotallpaul no it doesn't help to move the SCSS files into your templates directory. Your templates are parsed at the very moment you visit the site and are not exported at all. But both plugins don't compile the CSS for every site request (you wouldn't want them to do that!) and if you want your Twig vars to go into that CSS you need to find a way to run that _config.scss.twig file through Craft at the moment you do a) edit the file or b) make any edits in the Craft CP. – carlcs Aug 22 '14 at 00:54
2

I would go down the path of setting up your vars in a .json file generated by craft and have sass-json-vars pull them into your sass document.

This keeps both techs separate.

This would also mean you would need to have ruby running sass on your server. You could try the node version of sass but it is still missing a ton of stuff.

jnowland
  • 846
  • 6
  • 16