http://iamcarrico.github.io/tips-tricks-with-sass/#/
##Changing Color Template
I specifically created this snippet for a school site I was working on to change the colors based on what school pages, within a single Drupal site install, a user was on; the actual code was much longer but reduced a 7000 line CSS file down to 1200 lines of SASS. The school is http://isd191.org and I developed this while working for http://augustash.com. It uses a basic @each statement to select the page template's class then uses if/else logic to change colours based on the school class. Each school had variables associated with each element that had a specific color change.
@each $school in edward-d-neill-elementary, gideon-pond-elementary, harriet-bishop-elementary, marion-w-savage-elementary, rahn-elementary, sioux-trail-elementary, sky-oaks-elementary, william-byrne-elementary, vista-view-elementary, burnsville-senior-high-school, burnsville-high-school, burnsville-high-school-0, eagle-ridge-junior-high-school, metcalf-junior-high-school, nicollet-junior-high-school, bes-senior-high-alternative-school {
&.page-#{$school},
&.page-#{$school}news,
&.#{$school} {
$schoollink: #{$school};
a {
@if $schoollink == edward-d-neill-elementary {
color: $edward;
} @else if $schoollink == gideon-pond-elementary {
color: $gideon;
} @else if $schoollink == harriet-bishop-elementary {
color: $harriet;
} @else if $schoollink == hidden-valley-elementary {
color: $hidden;
} @else if $schoollink == marion-w-savage-elementary {
color: $marion;
} @else if $schoollink == rahn-elementary {
color: $rahn;
} @else if $schoollink == sioux-trail-elementary {
color: $sioux;
} @else if $schoollink == sky-oaks-elementary {
color: $skyOaks;
} @else if $schoollink == william-byrne-elementary {
color: $william;
} @else if $schoollink == vista-view-elementary {
color: $vista;
} @else if $schoollink == burnsville-senior-high-school {
color: $burnsville;
} @else if $schoollink == eagle-ridge-junior-high-school {
color: $eagle;
} @else if $schoollink == metcalf-junior-high-school {
color: $metcalf;
} @else if $schoollink == nicollet-junior-high-school {
color: $nicollet;
} @else if $schoollink == bes-senior-high-alternative-school {
color: $besAlt;
}
}
}
}.contain-to-grid {
background: none transparent;
.top-bar {
background: none transparent;
.top-bar-section li:not(.has-form) a:not(.button) {
background: none transparent;
}
.top-bar-section ul {
background: none transparent;
}
}
}.element {
position: relative;
top: 50%;
@include transform(translateY(-50%));
}Compile SASS with SASS gem.
sass --watch scss:css --style expanded