Simplifying Contexts and Events

Sass can somehow be a little of a black box, especially for young developers: you put some things in, you get some things out. Take the selector reference (&) for instance, it is a bit scary.

That being said, it doesn't have to be like this. We can make its syntax friendlier with nothing more than two very simple mixins.

Events

When writing Sass, you often find yourself writing things like this:

.my-element {
    color: red;

    &:hover,
    &:active, 
    &:focus {
        color: blue;
    }
}

Quite tedious, and not necessarily easy to read. We could create a little mixin to make it simpler.

/// Event wrapper
/// @author Harry Roberts
/// @param {Bool} $self (false) - Whether or not to include current selector
/// @see https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
@mixin on-event($self: false) {
    @if $self {
        &,
        &:hover,
        &:active,
        &:focus {
            @content;
        }
    } @else {
        &:hover,
        &:active,
        &:focus {
            @content;
        }
    }
}

Rewriting our previous example:

.my-element {
    color: red;

    @include on-event {
        color: blue;
    }
}

Much better, isn't it?

Now if we want to include the selector itself, we can set the $self parameter to true. For instance:

.my-element {
    @include on-event($self: true) {
        color: blue;
    }
}

This SCSS snippet will yield:

.my-element,
.my-element:hover,
.my-element:active,
.my-element:focus {
    color: blue
}

Contexts

Along the same lines, it is not uncommon to style an element depending on the parent he has. For instance, something like this:

.my-element {
    display: flex;

    .no-flexbox & {
        display: table;
    }
}

Let's make the syntax a bit more friendly again with a simple mixin:

/// Contexts
/// @author Hugo Giraudel
/// @param {String | List} $context
@mixin when-inside($context) {
    #{$context} & {
        @content;
    }
}

Rewriting our previous example:

.my-element {
    display: flex;

    @include when-inside('.no-flexbox') {
        display: table;
    }
}

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag