DynamicVariables.scss

//Please note this does not currently work.

@each $section in council, household, business {

  .#{$section} h2 {

    //Step 1: I want this below varible to dynamically change to $council-light, $household-light, $business-light
    color: $#{$section}-light; //this seems to be the problem of trying to append '-light' onto a varible name
    //please note council-light, household-light, business-light are all predefined varibles with hex colours assigned.

    //the below comment is what I would be the outcome i want which would then
    
    //step 2: varible becomes a preexisting varible
    color:$council-light;

    //become this below outcome.
    
    //step 3: final outcome.
    color:#9CCC40;;
	}
}



/* This is a below example of what I have to do at the moment.

.household & {
	@include background-image(linear-gradient($household-light, $household-dark));

	&:hover {
		background:$household-dark;
	}
}
.council & {
	@include background-image(linear-gradient($council-light, $council-dark));

	&:hover {
		background:$council-dark;
	}
}
.business & {
	@include background-image(linear-gradient($business-light, $business-dark));

	&:hover {
		background:$business-dark;
	}
}

		*/