Messing around with sass @each loops

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.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.