Skip to content

Instantly share code, notes, and snippets.

@finikwashere
Last active September 28, 2015 12:04
Show Gist options
  • Save finikwashere/30917ad7fe8faeac211f to your computer and use it in GitHub Desktop.
Save finikwashere/30917ad7fe8faeac211f to your computer and use it in GitHub Desktop.
Iterate through arguments in a Mixin
.thisGuyWithStates {
display: block;
background-color: black;
color: white;
}
.thisGuyWithStates:hover {
background-color: red;
}
.thisGuyWithStates:not(.state1, .state2):hover {
background-color: pink;
}
.thisGuyWithStates.state3:hover {
background-color: green;
}
// ----
// libsass (v3.2.5)
// ----
@mixin notSelectHover($args...){
$selectors: ();
@each $arg in $args {
$selectors: append($selectors, unquote('#{$arg}'), comma);
}
&:not(#{$selectors}):hover {
@content;
}
}
.thisGuyWithStates {
display:block;
background-color: black;
color: white;
&:hover {
background-color: red;
}
@include notClassHover('.state1', '.state2') {
background-color: pink;
}
&.state3:hover {
background-color: green;
}
}
@finikwashere
Copy link
Author

An example of simple iteration through mixin arguments which are selectors (classes)

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