Created
September 15, 2014 15:25
-
-
Save airen/9f27d1a53db30abc83fb to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.4) | |
// Compass (v1.0.1) | |
// ---- | |
//From:http://codepen.io/qiu8310/pen/EGyei | |
// 在 list 中第 index 个字符串后加上 value 字符串 | |
// list: (a b c d) index: 3, value: _hack => (a b c_hack d) | |
@function list-nth-append($list, $index, $value) { | |
$result: (); | |
$index: if($index < 0, length($list) + $index + 1, $index); | |
@for $i from 1 through length($list) { | |
@if $i == $index { | |
$result: append($result, nth($list, $i) + $value); | |
} | |
@else { | |
$result: append($result, nth($list, $i)); | |
} | |
} | |
@return $result; | |
} | |
@mixin on-parent-status($status) { | |
$new-selectors: (); | |
$selectors: &; | |
$status: unquote($status); // 去掉可能存在的 引号(" or ') | |
@if $selectors { | |
// @debug length($selectors); // $selectors 是一个 逗号 分开的数组 | |
@each $selector in $selectors { | |
$len: length($selector); // $selector 是一个 空格 分开的数组 | |
@if $len < 2 { | |
@error "`parent-status` current selector `#{$selector}` no parent selector"; | |
} | |
$selector: list-nth-append($selector, -2, $status); | |
$new-selectors: append($new-selectors, $selector, comma); | |
} | |
@at-root #{$new-selectors} { | |
@content; | |
} | |
} @else { | |
@error "`parent-status` Should not at root!"; | |
} | |
} | |
body { | |
width: 600px; | |
margin: 0 auto; | |
} | |
.tab { | |
a { | |
display: inline-block; | |
padding: 10px 60px; | |
cursor: pointer; | |
&:hover { | |
background: #AAA; | |
} | |
i { | |
margin-left: 10px; | |
@include on-parent-status(':hover') { | |
color: red; | |
} | |
} | |
} | |
.home_link, .about_link { | |
i { | |
@include on-parent-status(':hover') { | |
background: green; | |
} | |
} | |
} | |
} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
width: 600px; | |
margin: 0 auto; | |
} | |
.tab a { | |
display: inline-block; | |
padding: 10px 60px; | |
cursor: pointer; | |
} | |
.tab a:hover { | |
background: #AAA; | |
} | |
.tab a i { | |
margin-left: 10px; | |
} | |
.tab a:hover i { | |
color: red; | |
} | |
.tab .home_link:hover i, .tab .about_link:hover i { | |
background: green; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment