Skip to content

Instantly share code, notes, and snippets.

Created December 19, 2012 22:29
Show Gist options
  • Save anonymous/4341126 to your computer and use it in GitHub Desktop.
Save anonymous/4341126 to your computer and use it in GitHub Desktop.
Trying to keep my scss as dry as possible, doing some style changes on the body class which changes the colour values of a page. Is it possible to dynamically reference pre existing variables??
//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;
}
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment