Messing around with sass @each loops

×

Error message

Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in menu_set_active_trail() (line 2405 of /var/www/zach.seifts.us/www/includes/menu.inc).

Loops are one of the best parts of Sass (Syntactically Awesome Style Sheets), they let you define lists and loop over each item in the list.

For example, I've got this:

h1 {
   font-weight: normal;

    $font-sizes: (handhelds 120%, medium-screens 150%);
     @each $size in $font-sizes {
         @include respond-to(nth($size, 1)) {
             font-size: nth($size, 2);
          }
     }
}

That code will generate something like:

h1 { font-weight: normal; }
@media (max-width: 480px) {
    h1 {
        font-size: 120%;
    }
}
@media (max-width: 767px) {
    h1 {
        font-size: 150%;
    }
}

It's really cool how you can use the , inside of your list to split up lists of elements and then access items with the nth() function to grab the item in the sub-list.