Skip to content

Instantly share code, notes, and snippets.

@kaelig
Last active August 29, 2015 14:15
Show Gist options
  • Save kaelig/588ad7614481d259fc74 to your computer and use it in GitHub Desktop.
Save kaelig/588ad7614481d259fc74 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
/// Grab the last part of a selector
///
/// @param {List} $selector
/// @returns String
@function x-tail($selector) {
@return nth(nth($selector, -1), -1);
}
/// Double
/// @param {Number} $margin [null]
@mixin x-doubly($margin: null) {
& + #{x-tail(&)} {
margin-left: $margin;
@content;
}
}
// Simple usage
ul li {
@include x-doubly(10px) {
foo: bar;
}
}
// Advanced usage
@mixin my-list-item($selector) {
#{$selector} {
// This won't be helpful, it outputs .list .item + .list .item
// And won't style two consecutive children items
& + & {
color: hotpink;
}
// We actually want to style two consecutive children
// .list .item + .item
@include x-doubly {
color: hotpink;
}
}
}
@include my-list-item($selector: '.list > .item');
// (Kudos to @HugoGiraudel for the refactor)
ul li + li {
margin-left: 10px;
foo: bar;
}
.list > .item + .list > .item {
color: hotpink;
}
.list > .item + .item {
color: hotpink;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment