Sass Mixin для треугольников CSS

Для тех из вас, кто любит очень формальный синтаксис подписи, вот как это будет выглядеть:

 triangle(string $direction, list $position, color $color: currentColor, number $size: 1em) 

Mixin Core

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

 @mixin triangle($direction, $position, $color: currentcolor, $size: 1em) { @include absolute($position); @include size(0); content: ''; z-index: 2; /* Border stuff */ } 

Довольно чисто, не правда ли? Вот что он делает:

1. Позиционирует элемент благодаря mixin absolute() .
2. Делает элемент 0 шириной, 0 высотой.
3. В случае, если это псевдоэлемент (почти всегда), он появляется с использованием свойства content .
4. Использует z-index чтобы убедиться, что он находится над слоем по умолчанию (я полагаю, вы можете удалить это, если хотите).

Границы

Хорошо, мы сделали самую легкую часть. Главным образом потому, что у нас были собственные миксины, облегчающие боль. Теперь нам нужно разобраться со всеми границами. Это где opposite-direction вступает в игру. Используя пример, давайте вспомним, как это работает. Учтите, что мы хотим определить треугольник, указывающий направо :

• Правая граница не должна быть определена
• Левая граница должна быть цветной
• Верхняя граница должна быть прозрачной
• Нижняя граница должна быть прозрачной

Это приводит нас к следующему коду:

 @mixin triangle($direction, $position, $color: currentcolor, $size: 1em) { /* Core stuff */ border-#{opposite-position($direction)}: $size * 1.5 solid $color; $perpendicular-border: $size solid transparent; @if $direction == top or $direction == bottom { border-left: $perpendicular-border; border-right: $perpendicular-border; } @else if $direction == right or $direction == left { border-bottom: $perpendicular-border; border-top: $perpendicular-border; } } 

Сначала мы определяем противоположную границу. Для этого мы используем функцию opposite-direction() . В нашем предыдущем примере opposite-direction вернулось бы left , следовательно, свойство было бы border-left . Что касается размера, мне пришло в голову, что он выглядит лучше, если немного увеличить размер этой границы. Но это довольно произвольно, поэтому не стесняйтесь обновлять его, если оно вам не нравится.

Наконец, мы определяем перпендикулярные границы. Если направление top или bottom , эти границы имеют border-left и border-right а если направление left или right , перпендикулярные границы имеют border-top border-bottom . Обе границы должны быть прозрачными.

Обработка ошибок

Как всегда, мы не должны забывать обрабатывать ошибки в нашем миксине. Чтобы сделать миксин простым, я убедился, что направление в порядке. То есть это должно быть одно из 4 общих смещений. Я считаю, что важно сделать эту проверку, потому что можно решить передать угол (например, 42deg ), как это делается для функции linear-gradient() .

 @mixin triangle($direction, $position, $color: currentcolor, $size: 1em) { @if not index(top right bottom left, $direction) { @warn "Direction must be one of `top`, `right`, `bottom` or `left`; currently `#{$direction}`."; } @else { /* Mixin content */ } } 

Обратите внимание, как мы используем функцию index() чтобы увидеть, является ли направление одним из 4 смещений, вместо того, чтобы вручную проверять каждое с помощью == .

В среде Sass 3.3 мы могли бы сделать нашу функцию чуть более пуленепробиваемой, если сначала $direction: to-lower-case($direction) : $direction: to-lower-case($direction) . Это предотвратит ошибку в случае, если направление не полностью в нижнем регистре. Детали имеют значение.

Я совсем недавно писал о том, как поддерживать несколько версий Sass одновременно. Я настоятельно рекомендую вам прочитать статью, но в основном это будет выглядеть так:

 @mixin triangle($direction, $position, $color: currentcolor, $size: 1em) { $direction: if(function-exists("to-lower-case") == true, to-lower-case($direction), $direction); @if not index(top right bottom left, $direction) { @warn "Direction must be one of `top`, `right`, `bottom` or `left`; currently `#{$direction}`."; } @else { /* Mixin content */ } } 

Что касается позиции, то это должна быть работа mixin position() для обработки ошибок, а не mixin triangle() . Что касается цвета и размера, мы, вероятно, могли бы проверить тип данных, но я чувствовал, что проверки позиции было достаточно для этой демонстрации.

Использование и пример

Использовать его довольно просто. Но помните, поскольку элемент, который включает в себя треугольный миксин, позиционируется абсолютно, его родитель должен иметь position: relative .

 /** * 1. Enable absolute positioning for pseudo-element * 2. Using a pseudo-element to generate the arrow * 3. Same as @include triangle(bottom,top 100% left 1em, $color); */ .tooltip { $color: #3498db; position: relative; /* 1 */ background: $color; padding: .5em; border-radius: .15em; color: white; text-align: center; &::before { /* 2 */ @include triangle( $direction : bottom, $position : top 100% left 1em, $color : $color ); /* 3 */ } } 

А вот живое демо для вас, чтобы поиграть: