Brackets and Sass

The WordPress theme I run on eichefam.net is one I’ve built myself from the ground up. I had initially set it up using Less to compile the stylesheet, but I really wasn’t using any of its advantages (like nesting, loops, that kind of thing) over plain old CSS. After doing some reading, I came to…

I used to just use Notepad++ to work on WordPress code changes, but I’ve been using Brackets more lately. As a Windows user, getting Ruby up and running, while not impossible, is definitely more headache than it’s worth. So I use the Brackets SASS plugin, which compiles my .scss files on save. And then I discovered a limitation.

So let me back up a bit. This was the code I initially wrote to generate the CSS for the social icons in my profile (below the post):

.facebook {
  @include social-box-shadow(20px, $social-color-facebook);
  &:hover {
    color: $social-color-facebook;
    @include social-box-shadow(2px, $social-color-facebook);
  }
}
.twitter {
  @include social-box-shadow(20px, $social-color-twitter);
  &:hover {
    color: $social-color-twitter;
    @include social-box-shadow(2px, $social-color-twitter);
  }
}
.google-plus {
  @include social-box-shadow(20px, $social-color-google-plus);
  &:hover {
    color: $social-color-google-plus;
    @include social-box-shadow(2px, $social-color-google-plus);
  }
}

There’s still a lot of repetition there, so I thought I would leverage Sass’s multiple assignment @each functionality to generate my code. So I wrote this in its place:

.postprofile {
  .social {
    @each $social-network, $color in (facebook, #3b5998), (twitter, #00acee), (google-plus, #dd4b39) {
      .#{$social-network} {
        @include social-box-shadow(20px, $color);
        &:hover {
          color: $color;
          @include social-box-shadow(2px, $color);
        }
      }
    }
  }
}

Unfortunately, Brackets gave me a compile error: error: expected ‘in’ keyword in @each directive

As it turns out, Brackets SASS is not up to date with Sass version 3.3, in which multiple assignment @each usage is supported. So I wrote this workaround:

$social-icons: (facebook, #3b5998), (twitter, #00acee), (google-plus, #dd4b39);
@each $val in $social-icons {
  $social-network: nth($val, 1);
  $color: nth($val, 2);
  .#{$social-network} {
    @include social-box-shadow(20px, $color);
    &:hover {
      color: $color;
      @include social-box-shadow(2px, $color);
    }
  }
}

It’s not as elegant as the original @each statement I wrote, but it’s still less repetitious code than what I originally had. Not only that, but if I want to add another class, it’ll be much easier than adding another whole set of classes.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related