Skip to content

Instantly share code, notes, and snippets.

@hideki-a
Created July 16, 2014 01:30
Show Gist options
  • Save hideki-a/50d99685bdd975edc389 to your computer and use it in GitHub Desktop.
Save hideki-a/50d99685bdd975edc389 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----
// Reference: https://www.youtube.com/watch?v=o4ok4gsiQSw
@mixin insert-context($target, $add-contexts...) {
$new-contexts: ();
$new-selector: ();
// 新しいコンテキストを追加する
@each $context in $add-contexts {
$new-contexts: append($new-contexts, selector-nest($target, $context), comma);
}
// "&"内のコンテキストを変更する
@each $context in $new-contexts {
$new-selector: append($new-selector, selector-replace(&, $target, $context), comma);
}
// 出力
@at-root #{$new-selector}{
@content;
}
}
.nav{
a{
background-color: #000;
&:hover,
&.active{
background-color: #eee;
}
}
.en{
color: #fff;
@include insert-context(".nav", "a:hover", "a.active"){
color: #333;
}
}
}
.nav a {
background-color: #000;
}
.nav a:hover, .nav a.active {
background-color: #eee;
}
.nav .en {
color: #fff;
}
.nav a:hover .en, .nav a.active .en {
color: #333;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment