简化上下文和事件

Sass 在某种程度上可能有点像黑盒，特别是对于年轻的开发者来说：你输入一些东西，然后得到一些输出。例如，选择器引用（&）就有点吓人。

话虽如此，但它不必如此。我们可以使用两个非常简单的mixin来使其语法更友好。

事件

在编写 Sass 时，你经常会发现自己编写类似这样的代码

.my-element {
    color: red;

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

相当繁琐，并且不一定易于阅读。我们可以创建一个小的mixin来简化它。

/// 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;
        }
    }
}

重写我们之前的示例

.my-element {
    color: red;

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

好多了，不是吗？

现在，如果我们想包含选择器本身，我们可以将$self参数设置为true。例如

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

此 SCSS 代码段将生成

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

上下文

同样，根据父元素来设置元素的样式也并不少见。例如，像这样

.my-element {
    display: flex;

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

让我们再次使用一个简单的mixin来使语法更友好

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

重写我们之前的示例

.my-element {
    display: flex;

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