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