Skip to content

Instantly share code, notes, and snippets.

@julianwachholz
Last active December 15, 2015 14:29
Show Gist options
  • Save julianwachholz/5274492 to your computer and use it in GitHub Desktop.
Save julianwachholz/5274492 to your computer and use it in GitHub Desktop.
Many different class names that need similar rules. Easy solution with SCSS.
$categories: (
'somecategory' $yellow,
'othercategory' $green,
'thirdcategory' $blue
);
@function category-classes($prefix: '') {
$classes: ();
@each $category in $categories {
$name: nth($category, 1);
$classes: join($classes, unquote("#{$prefix}.#{$name}"), comma);
}
@return $classes;
}
selector {
#{category-classes('&')} {
@include single-transition(border-color);
}
@each $category in $categories {
$name: nth($category, 1);
$color: nth($category, 2);
&.#{$name} {
border-color: rgba($color, .6);
&:hover {
border-color: rgba($color, 1.0);
}
}
}
}
@julianwachholz
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment