Menu icon Foundation
Changing global color variables in app.scss

Hello,

I am wondering if something like the below logic can be done in Foundation:

 

<body class="site-1">
<body class="site-2">
etc


.site-1 {
	$primary-color: $something;
}

.site-2 {
	$primary-color: $something-else;
}

 

Any idea?

Thanks,
Klevis

foundation6

Hello,

I am wondering if something like the below logic can be done in Foundation:

 

<body class="site-1">
<body class="site-2">
etc


.site-1 {
	$primary-color: $something;
}

.site-2 {
	$primary-color: $something-else;
}

 

Any idea?

Thanks,
Klevis

Lukas Hillebrand over 2 years ago

No I dont't thinks so. Only with a condition/logic applied to the body tag, like in TWIG:

 

<div class="abo-overview__item {% if app.request.get('_route') == 'eco' %}abo-overview__item--eco{% endif %}">

 

 

Klevis Miho over 2 years ago

Thanks Lukas. 

What would be your approach to a website which has 4 sections where each section has it's own branded colors?

Lukas Hillebrand over 2 years ago

Well what Technology / Dev Stack / CMS are you using?

Klevis Miho over 2 years ago

No CMS. Just plain Foundation with SASS without handlebars.

Lukas Hillebrand over 2 years ago

Check with JS if there is a change in the URL like: #site-1 and apply a class to the body tag.

Klevis Miho over 2 years ago

My main problem would be the styling in SASS.

Right now I am using it like this:

.body-1 {
	.header {
		.socials {
			background: $primary-color-1;
			border-top: 15px solid $secondary-color-1;
		}
		.donate {
			span {
				color: $primary-color-1;
			}
		}
	}
}
.body-2 {
	.header {
		.socials {
			background: $primary-color-2;
			border-top: 15px solid $secondary-color-2;
		}
		.donate {
			span {
				color: $primary-color-2;
			}
		}
	}
}

But I don't like this approach. I want to have only $primary-color and $secondary-color. 

Lukas Hillebrand over 2 years ago

If you have just static HTML files just apply to the body tag or a content/wrapper element. I´ve made a quick pen.

Klevis Miho over 2 years ago

 I have done it like your solution Lukas. But that would leave me with a lot of base color variables like:

 

$primary-color-1: #2fb3b8;

$secondary-color-1: #20808c;

$primary-color-2: #86af07;

$secondary-color-2: #5d731f;

Lukas Hillebrand over 2 years ago

What is the problem?

Klevis Miho over 2 years ago

I don't want to have a lot of variables for colors.

I want to change the $primary and $secondary color based on the body class. 

Something like this:

.body-1 {
	$primary-color: black;
	$secondary-color: red;
}
.body-2 {
	$primary-color: green;
	$secondary-color: blue;
}

Sorry if I am not being clear enough. 

Lukas Hillebrand over 2 years ago

I think you mean something like this:

https://www.sitepoint.com/dealing-color-schemes-sass/

https://zellwk.com/blog/organizing-multiple-theme-styles-with-sass/

Klevis Miho over 2 years ago

Yeah that's it in general.

Thanks man :-)