scss #sass @each

Posted 2021-05-18

// https://github.com/sass/node-sass/issues/263#issuecomment-38404669

$foo: (puma, black, default),
      (sea-slug, blue, pointer),
      (egret, white, move);

@each $val in $foo {
  $animal: nth($val, 1);
  $color: nth($val, 2);
  $cursor: nth($val, 3);

  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

.section-news.page-news {

  // Add a news block for each year
  @each $newsYear in 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014 {

    &.page-news-#{$newsYear} .news-menu.block {

      h3 a.anchor-#{$newsYear} { @include anchor-hover; }

      ul li.views-row.year-#{$newsYear} a { background-color: #edc265; }
    }
  }
}