Drupal Views, Iteration, and SASS: A Love Story.

Drupal Views, Iteration, and SASS: A Love Story.

Both Drupal and SASS are incredibly dynamic tools – put them together and you have a powerhouse of function and design.

Subject Matter
Development

Author

Published
October 1, 2013

Share
Facebook Tweet

All good stories have a beginning: this one starts with a mockup from our lead designer, Tyler, in which dynamic child lists were to be colored according to each item’s delta, or iteration index. The client could potentially have a dozen items, or only two on any given page; the paradigm has to work dynamically.

iteration

After the first 5 iterations, the colors start over again. My first thought was to use nth-child() and call it a day, but for full x-browser support (I’m looking at you Windows XP/Internet Explorer users), as well as future maintainability (let’s say a color gets dropped and now we need to move down to only 4 iterative versions) I decided to go a more classy/SASSy route. It also gave me a chance to play with SASS looping. (Note that throughout this post I will be using SCSS syntax).

The results were not only satisfying, but re-usable for other projects, which has already come in handy more than once.

Step 1: Drupal Views – Fields

To get the required classes on each item, add two fields to your view result: View Result Counter and Math Expression. Both fields can be excluded from display, because we’ll only be using them to render a class name. The view result counter should have a starting value of zero and be positioned above the math expression so we can use its token within our expression.

fields

The math expression requires a modulus function, so we make one: mod(x,y) = x - (floor(x/y) * y);. Then we use that function to generate an iterator that resets every 5 rows (our iterator limit), using the [counter] token to get the index of each row: mod([counter], 5) + 1;. The entire math expression:

mod(x,y) = x - (floor(x/y) * y);
mod([counter], 5) + 1;

Step 2: Drupal Views – Classes

Once your iterator is set up, we can use its token to generate a class name on the row itself. Go to Format -> Format -> Settings and set the Row Class to views-item-[expression]. Note that it’s not recommended to use views-row- as views already prefixes its rows with views-row-[counter] unless “Add views row classes” is explicitly unchecked.

row-class

If all went well, your views rows should now have a class that resets to views-item-1 every 5 rows. Now we can style as we desire.

Step 3: SASS – Looping

If you’re not using SASS, fear not, you can always style your view adding colors for .views-item-1, .views-item-2, etc. If you are using SASS, here’s the approach I took.

Because we’ll be needing to change two colors on each iteration, the background and the text color, we need to set up two sets of variables. For our mockup above, this looked like:

$bgs: $red, $blue, $yellow, $white, $dkblue;
$cls: $white, $white, $black, $black, $white;

It is not a typo that I’m using $white as a variable — I will blog about my thoughts around that sometime soon. Now we’re ready to start our loop:

@for $i from 1 through 5 {
  .views-item-#{$i} {
    a{
      color: nth($cls, $i);
      background: rgba(nth($bgs, $i), 0.8);
      // Adding in a subtle hover effect.
      &:hover{
        background: rgba(nth($bgs, $i), 0.7);
      }
    }
  }
}

This loop is simplified in that it assumes all text in these lists are within <a> tags, but it demonstrates the point. Using a simple SASS @for loop tackles an otherwise verbose styling of these lists. An added bonus is that if colors should need to change or be removed, the only things we would need to alter are our color arrays and the iterator limit set in views.

Flexible, clean, and mighty powerful!