Last active
September 30, 2015 14:22
-
-
Save lunelson/d6780337f90b8efbbe9e to your computer and use it in GitHub Desktop.
How to get the current selector in Sass
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.14) | |
| // Compass (v1.0.3) | |
| // SassyLists (v2.2.1) | |
| // ---- | |
| @import "SassyLists"; | |
| @function last-sels() { | |
| $sel: &; $out: (); | |
| @each $list in $sel { | |
| $curr: nth($list, length($list)); | |
| @if not index($out, $curr) { | |
| $out: append($out, $curr, 'comma'); | |
| } | |
| } | |
| @return $out; | |
| } | |
| @function initial-sels() { | |
| $sel: &; $out: (); | |
| @each $list in $sel { | |
| $curr: sl-slice($list, 1, length($list) - 1); | |
| @if not index($out, $curr) { | |
| $out: append($out, $curr, 'comma'); | |
| } | |
| } | |
| @return $out; | |
| } | |
| @function sibling-to($siblings, $op: '+'){ | |
| $initials: initial-sels(); | |
| $lasts: last-sels(); | |
| $out: ''; | |
| @for $i from 1 through length($initials) { | |
| @for $s from 1 through length($siblings) { | |
| @for $l from 1 through length($lasts) { | |
| $out: if(($i $s $l) == (1 1 1), | |
| unquote('#{nth($initials, $i)} #{nth($siblings, $s)} #{$op} #{nth($lasts, $l)}'), | |
| $out + unquote(', #{nth($initials, $i)} #{nth($siblings, $s)} #{$op} #{nth($lasts, $l)}') | |
| ); | |
| } | |
| } | |
| } | |
| @return $out; | |
| } | |
| @mixin sibling-to($args...) { | |
| @at-root #{sibling-to($args...)} { | |
| @content; | |
| } | |
| } | |
| .nested .really p { | |
| initial: inspect(initial-sels()); | |
| last: inspect(last-sels()); | |
| margin-top: 1rem; | |
| @at-root #{sibling-to(h1 h2 h3 h4 h5 h6, '~')} { | |
| margin-top: 0; | |
| } | |
| } | |
| p + p { | |
| margin-top: 0; | |
| } | |
| .typo h1, body { | |
| p { | |
| margin-top: 1rem; | |
| @include sibling-to(p) { | |
| margin-top: 0; | |
| } | |
| } | |
| } |
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
| .nested .really p { | |
| initial: (.nested .really,); | |
| last: (p,); | |
| margin-top: 1rem; | |
| } | |
| .nested .really h1 ~ p, .nested .really h2 ~ p, .nested .really h3 ~ p, .nested .really h4 ~ p, .nested .really h5 ~ p, .nested .really h6 ~ p { | |
| margin-top: 0; | |
| } | |
| p + p { | |
| margin-top: 0; | |
| } | |
| .typo h1 p, body p { | |
| margin-top: 1rem; | |
| } | |
| .typo h1 p + p, body p + p { | |
| margin-top: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment