Skip to content

Instantly share code, notes, and snippets.

@danielguillan
Created July 16, 2014 15:55
Show Gist options
  • Save danielguillan/a1b1d76b6e977aca499d to your computer and use it in GitHub Desktop.
Save danielguillan/a1b1d76b6e977aca499d 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)
// ----
// -----------------------------------------------------------------------------
// Context
// -----------------------------------------------------------------------------
/**
* Modifies the context for the current (&) selector by adding a user-defined
* class or pseudo-class to an ancestor component
* Useful for adding classes or pseudo-classes to the parent or root element
* while avoiding nesting and selector repetition.
*
* @todo Might break with more complex selectors. Needs testing and code review.
*
*/
@mixin context($class, $selectors...) {
// @todo really??
@if length($selectors) == 1 {
$selectors: nth($selectors, 1);
}
$new-selector: ();
@each $selector in $selectors {
// @todo get rid of ugly if function
$new-selector: selector-replace(if(length($new-selector) == 0, &, $new-selector), $selector, '#{$selector}#{$class}');
}
@at-root #{$new-selector} {
@content;
}
}
// -----------------------------------------------------------------------------
// Parent
// -----------------------------------------------------------------------------
/**
* Modifies the context of a selector by adding a user-defined class or
* pseudo-class to its parent component
* Useful for adding classes or pseudo-classes to the parent element
* while avoiding nesting and selector repetition.
*
* @throws No selector found
* @throws #{&} has no parent selectors
*
* @todo Might break with more complex selectors. Test and improve.
* @todo Create a context mixin where parent() and base() are aliases for it
*
*/
@mixin parent($class) {
@if (& == null) {
@error 'No selector found';
}
@each $selector in & {
@if (length($selector) < 2) {
@error '#{&} has no parent selectors';
}
}
$selectors: ();
@each $selector in & {
$selector: nth($selector, -2);
$selectors: append($selectors, $selector, comma);
}
@include context($class, $selectors...) {
@content;
}
}
// -----------------------------------------------------------------------------
// Root
// -----------------------------------------------------------------------------
/**
* Modifies the context of a selector by adding a user-defined class or
* pseudo-class to the root component
* Useful for adding classes or pseudo-classes to the root element
* while avoiding nesting and selector repetition.
*
* @throws No selector found
* @throws #{&} has no parent selectors
*
* @todo Might break with more complex selectors. Test and improve.
* @todo Create a context mixin where parent() and base() are aliases for it
*
*/
@mixin root($class) {
@if (& == null) {
@error 'No selector found';
}
@if (length(nth(&, 1)) < 2) {
@error '#{&} has no parent selectors';
}
$selectors: ();
@each $selector in & {
$selector: nth($selector, 1);
$selectors: append($selectors, $selector, comma);
}
@include context($class, $selectors...) {
@content;
}
}
// -----------------------------------------------------------------------------
// Example
// -----------------------------------------------------------------------------
// The old way. Note the selector repetition.
// .parent {
// color: blue;
// &:hover {
// color: red;
//
// .child {
// display: block;
// }
//
// }
//
// &.is-active {
// color: green;
//
// .child {
// color: red;
// }
// }
//
// .child {
// display: none;
// }
//
// }
// New way. Everything in its right place.
.parent {
color: blue;
&:hover {
color: red;
}
&.is-active {
color: green;
}
.child {
display: none;
@include parent(':hover') {
display: block;
}
@include parent('.is-active') {
color: red;
}
}
}
.root {
.parent {
.child {
@include root(':hover') {
color: blue;
}
}
}
}
.some, .other {
.selector1 {
@include context(':hover', '.other') {
color: blue;
}
}
.selector2 {
@include context(':hover', '.some', '.other') { // same result as using parent(:hover)
color: blue;
}
}
}
/**
* Modifies the context for the current (&) selector by adding a user-defined
* class or pseudo-class to an ancestor component
* Useful for adding classes or pseudo-classes to the parent or root element
* while avoiding nesting and selector repetition.
*
* @todo Might break with more complex selectors. Needs testing and code review.
*
*/
/**
* Modifies the context of a selector by adding a user-defined class or
* pseudo-class to its parent component
* Useful for adding classes or pseudo-classes to the parent element
* while avoiding nesting and selector repetition.
*
* @throws No selector found
* @throws has no parent selectors
*
* @todo Might break with more complex selectors. Test and improve.
* @todo Create a context mixin where parent() and base() are aliases for it
*
*/
/**
* Modifies the context of a selector by adding a user-defined class or
* pseudo-class to the root component
* Useful for adding classes or pseudo-classes to the root element
* while avoiding nesting and selector repetition.
*
* @throws No selector found
* @throws has no parent selectors
*
* @todo Might break with more complex selectors. Test and improve.
* @todo Create a context mixin where parent() and base() are aliases for it
*
*/
.parent {
color: blue;
}
.parent:hover {
color: red;
}
.parent.is-active {
color: green;
}
.parent .child {
display: none;
}
.parent:hover .child {
display: block;
}
.parent.is-active .child {
color: red;
}
.root:hover .parent .child {
color: blue;
}
.some .selector1, .other:hover .selector1 {
color: blue;
}
.some:hover .selector2, .other:hover .selector2 {
color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment