Is there a way in SASS to dynamically assign value to variable between files

Question

I search the proper way to do that in SASS, I don't know if it's possible.

For my exemple I've a website in laravel with 3 subdomains. These 3 subdomains will have the same site structure, but data and styles will be different.

In laravel I've a variable subdomain like that: {subdomain}.mysite.com So if I go to green.mysite.com it will load for example green.css

I want to use sass in a modular way and have:

common.scss all styles common to all subdomains with undefined variables (like colors)

green.scss color variables and some stuff are defined here

purple.scss variables for purple theme

And for code example in common.scss I would have something like that:

#main-footer{
     border-top: 4px solid $main;
}

And in green.scss:

/* COLORS */
$main: #8cc83d;
$second: #d38345;

Is this possible to do in particular way in SASS or I've to copy paste all my code which contain vars ? :/

if you use generic variable names for colors for each sub theme (i.e. $primary, $secondary, $link, $accent and so on) you could sort of accomplish this by simply having different master files that import each respective settings/vars definitions file into the sass build for that specific site. You'll still have 3 separate compiled SASS files to manage but at least you can still keep most of your code in a central common.scss file that is compiled into each site. — Ennui
– Ennui, Commented Jan 7, 2014 at 14:55
Basically what agconti says in his answer, but you need 3 separate _vars.css definition files, and three separate main.scss files (one for each site) that each import the _common.scss main styles and the _vars.css file for each respective color scheme. — Ennui
– Ennui, Commented Jan 7, 2014 at 14:56
@Ennui is right, theres really no way around it since you fundamentally have there separate sites with with their own css, even though only the colors differ. — agconti
– agconti, Commented Jan 7, 2014 at 14:59
thx ennui, I will try to deal with it :/ The thing is that I wouldn't like "clone" files with same stuff, but seems there is no solution for that like I thought — Lory Huz
– Lory Huz, Commented Jan 7, 2014 at 15:04
No, that would require CSS to have variables. SASS just compiles to CSS (and usually pretty verbose CSS unless you are very careful about how you organize and nest your SCSS). This is pretty much the best solution - it may not be the most efficient but it is the easiest to maintain BY FAR. — Ennui
– Ennui, Commented Jan 7, 2014 at 15:12

agconti · Accepted Answer · 2014-01-07 15:00:18Z

5

create a sass partial called _vars.scss then in your main.scss import it before you use it.

ex:

_vars.scss

$color-main-theme: blue;

_header.scss

html {color: $color-main-theme;}

main.scss

@import "vars"
@import "header"

Then when your sass complies down your vars will be added correctly. As a bonus this makes it really easy to manage and change code from project to project.

As @Ennui says you'll need three separate _vars.scss files to accomplish what you want (included here for completeness and incase anyone doesn't look at the comments).

Basically what agconti says in his answer, but you need 3 separate _vars.css definition files, and three separate main.scss files (one for each site) that each import the _common.scss main styles and the _vars.css file for each respective color scheme. – Ennui 3 mins ago

edited Jan 7, 2014 at 15:00

answered Jan 7, 2014 at 14:53

agconti

18.2k17 gold badges85 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lory Huz Over a year ago

Since this need three var files + three main files, it's not dynamic and doesn't really answer the question. I don't even need _vars since I need already 3 main.scss I could put vars here so. But I upvoted though its helped

Ennui Over a year ago

@LoryHuz SCSS isn't dynamic it is a compiled language. I'm not sure you fully understand what it's intended for since you seem a little confused about its purpose/usage.

Lory Huz Over a year ago

Yes I know, I just want to know if this was possible (like I said in my question), and it's not. I was more searching tips or kind of hacks to solve or its not solvable, help my workflow

Collectives™ on Stack Overflow

Is there a way in SASS to dynamically assign value to variable between files

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related