Создание мастера шагов с помощью BEM и Sass

Теперь давайте начнем с математики, хорошо? Мы собираемся повернуть квадраты на 45 градусов, чтобы их углы были направлены сверху, справа, снизу и слева. Чтобы он выглядел правильно, нам нужно убедиться, что диагональ квадрата строго равна высоте элемента шага. И это предполагает некоторые расчеты.

Для начала посчитаем высоту элемента шага:

step_height = height of tallest content + twice the vertical padding + twice the border

Мы знаем, что самое высокое содержание — это число, которое мы только что добавили, и мы жестко закодировали его высоту, чтобы она была в три раза больше базовой линии. Мы знаем, что вертикальный отступ для ссылок равен базовой линии. И, наконец, у нас есть две границы 1px. Легко!

 $step-height: ($step-baseline * 3) + ($step-baseline * 2) + (1/16 * 1em * 2); 

Который оказывается 2.625em . Таким образом, мы точно знаем, что диагональ нашего 2.625em должна быть 2.625em однако мы не можем определить размер элемента по его диагонали, поэтому нам нужно вычислить длину его стороны по этому значению. Формула:

 side_length = diagonal * sqrt(2) / 2 

Большой! Если вы используете Compass или SassyMath , есть функция sqrt() , иначе нам нужно включить приблизительную оценку того, что на самом деле является квадратный корень из 2. Я пошел с: 1.4142135623730951 . Чтобы получить максимум от обоих миров, мы можем написать это так:

 $sqrt-2: if(function-exists('sqrt') == true, sqrt(2), 1.4142135623730951); 

Хорошо, мы получили все, давайте напишем код!

 /** * Arrows * 1. Sizing (yay math!) * 2. Putting it on the right edge * 3. Moving it back to the left from one half of it's size * 4. Slightly translating it from the top * 5. Rotating it 45 degrees, obviously * 6. Moving it on top of other things * 7. Applying borders on the two visible sides */ .steps__item { /* Other styles... */ &:after { $sqrt-2: if(function-exists('sqrt') == true, sqrt(2), 1.4142135623730951); $step-height: ($step-baseline * 3) + ($step-baseline * 2) + (1/16 * 1em * 2); $step-arrow-size: $step-height * $sqrt-2 / 2; $top-offset: 1 / $sqrt-2 / 2; content: ''; width: $step-arrow-size; /* 1 */ height: $step-arrow-size; /* 1 */ position: absolute; left: 100%; /* 2 */ margin-left: -$step-arrow-size / 2; /* 3 */ top: $top-offset; /* 4 */ transform: rotate(45deg); /* 5 */ z-index: 2; /* 6 */ background: inherit; border-right: $step-border; /* 7 */ border-top: $step-border; /* 7 */ } } 

Работа с текущим шагом

Ничего не поделаешь, поэтому текущий шаг выглядит так, как будто он подсвечивается. Нам нужно только изменить цвет фона. Поскольку цвет псевдоэлементов зависит от цвета фона, все будет работать нормально.

 .steps__item--active { background: $step-background-color-active; } 

Мы также должны изменить цвет текста как на готовых, так и на активных шагах, а также на цвет фона номера. Маленькие вещи, но это то, что делает мага так приятно.

 .steps__item--done .steps__link, .steps__iten--active .steps__link { color: $step-text-color; &:before { background: $step-counter-color-active; } } 

Работа с маленькими экранами

И последнее, но не менее важное: мы должны убедиться, что на маленьких экранах все выглядит хорошо. Я пошел со сложением всех предметов один под другим, таким образом это все еще похоже на пошаговый процесс.

 .steps__items { /* Other styles... */ @media (max-width: $step-breakpoint) { width: 100% !important; border: $step-border; border-bottom: none; padding: ($step-baseline * 2) 0; /** * Removing the arrows */ &:after { content: none; } } } .steps__item--last { /* Other styles... */ @media (max-width: $step-breakpoint) { border-bottom: $step-border; } } .steps__link:before { /* Other styles... */ /** * Moving numbers on the left rather than stuck to the content */ @media (max-width: $step-breakpoint) { float: left; margin-right: 0; } } 

Это оно!

Работа со старыми браузерами

Чтобы иметь дело со старыми браузерами, есть два различных способа:

• использовать Modernizr ;
• используйте Feature Queries .

Выберите тот, который вы предпочитаете, это не имеет значения. Наш пошаговый мастер использует несколько вещей, которые не поддерживаются в старых браузерах:

• продвинутые селекторы CSS;
• CSS трансформации;
• сгенерированный контент (псевдоэлементы).

К сожалению, первый не может быть легко заполнен только CSS, поэтому я советую вам вообще избегать расширенных селекторов CSS, если вам нужно поддерживать устаревшие браузеры: просто добавьте больше классов в DOM.

Что касается CSS-преобразований, которые используются для стрелок, очень легко добавить решение, когда они не поддерживаются:

 // With Modernizr .no-csstransforms .steps__item { border-right: $step-border; &:after { content: none; } } // With Features Queries @supports not (transform: rotate(45deg)), not (-webkit-transform: rotate(45deg)), not (-ms-transform: rotate(45deg)) { .steps__item { border-right: $step-border; &:after { content: none; } } } 

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

 .no-generatedcontent .steps { list-style-type: decimal; list-style-position: inside; } 

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

Последние мысли

Вот и все, ребята! Надеюсь, вам понравилось объяснение, и если вы можете придумать что-нибудь, чтобы улучшить его, обязательно поделитесь!