Sending dynamic variables to SASS

lomas09 picture lomas09 · Jun 25, 2013 · Viewed 14.2k times · Source

I am currently working in a new project that allows users to change the appearance of the website base on their likes. They could change background colors and stuff, which get saved on a database for later use or they could be stored in a cookie. However I've been using a php document to emulate a stylesheet so that way I could pass variables like <link rel="stylesheet" type="text/css" href="main.php?bgColor=#444" as an example. This way I could just make the css dynamic and not rely too much on javascript.
However some friend mentioned using SASS, but I don't really know if it is suited for my project since I don't know much about the compass framework. How would you pass dynamic variables to this .sass or .scss file? Do you just do an @import "php-variables"; statement and include a php file? or can you send dynamic variables as I did with php?
And also, what are the benefits of using php over SASS, or vice-versa?

Answer

imjared picture imjared · Jun 25, 2013

There seems to be a fundamental lack of understanding here so I'll provide a short answer and a longer one.

short

You can not send dynamic variables to Sass. There may be some port of it for PHP that makes it possible but using just Sass, this isn't feasible.

longer

You may want to familiarize yourself with what exactly Sass is and how it fits in to your toolkit. It sounds like you're using PHP so I imagine you'd have PHP rendering out HTML templates/doing DB magic, maybe a dash of JavaScript to do client side scripting, and you'll have CSS (plain, vanilla CSS) styling elements on your site.

Sass/SCSS (hereafter, Sass) does not replace CSS (you won't ever see <link type="text/sass">), it simply provides a different syntax for writing styles that is later compiled into CSS.

Sass is typically compiled to CSS before you send your assets to production, it's not generated when a user requests it. There's no real connection between your Sass files and your HTML document so you would not be able to pass any variables to your Sass files.