Skip to content

Instantly share code, notes, and snippets.

@jaicab
Created November 21, 2014 08:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jaicab/d737952ac952a5dad0e3 to your computer and use it in GitHub Desktop.
Save jaicab/d737952ac952a5dad0e3 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.galleries[data-selected*=ui-design] ul:not([data-gallery*=ui-design]), .galleries[data-selected*=branding] ul:not([data-gallery*=branding]), .galleries[data-selected*=illustration] ul:not([data-gallery*=illustration]) {
display: none;
}
</style>
</head>
<body>
<script id="jsbin-source-css" type="text/css">%hide{
display: none;
}
$galleries: "ui-design", "branding", "illustration";
@each $gallery in $galleries {
.galleries{
&[data-selected*=#{$gallery}]{
ul:not([data-gallery*=#{$gallery}]){
@extend %hide;
}
}
}
}
//
// Output:
// .galleries[data-selected*=ui-design] ul:not([data-gallery*=ui-design]),
// .galleries[data-selected*=branding] ul:not([data-gallery*=branding]),
// .galleries[data-selected*=illustration] ul:not([data-gallery*=illustration]) {
// display: none;
// }
//
</script>
</body>
</html>
.galleries[data-selected*=ui-design] ul:not([data-gallery*=ui-design]), .galleries[data-selected*=branding] ul:not([data-gallery*=branding]), .galleries[data-selected*=illustration] ul:not([data-gallery*=illustration]) {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment