Упрощение контекстов и событий онлайн урок.


Сасс может как-то быть маленьким черным ящиком, особенно для молодых разработчиков: вы вкладываете кое-что, вы получаете кое-что. Например, возьмите ссылку на селектор (& amp;), это немного страшно.

Это, как говорится, не обязательно должно быть таким. Мы можем сделать его синтаксис более дружелюбным с не более чем двумя очень простыми миксинами.

# События

При написании 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 Hugo Giraudel
/// @param {String | List} $context
@mixin when-inside($context) {
#{$context} & {
@content;
}
}

Переписывая наш предыдущий пример:

.my-element {
display: flex;

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