Центрирование с помощью Sass

Центрирование с помощью Sass

От автора: всем известно, что центрирование в CSS достаточно утомительный процесс. На эту тему уже сложено масса шуток, например, «нам удалось запустить человека на луну, но мы не умеем делать вертикальное выравнивание в CSS».

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

В этой статье не будет объяснений, как работают эти методы, будут показаны способы, как обернуть эти методы в Sass mixin’ы, чтобы легче их использовать. Если вы не сильно ориентируетесь в центрировании в CSS, я порекомендую вам пару статей, чтобы вы были подкованы в этом деле.

Как центрировать объекты в CSS

Центрирование в CSS: Полный гайд

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Разобрались? Тогда начнем.

О чем статья?

В первую очередь мы сосредоточимся на центрировании элементов, находящихся внутри своих родителей, т.к. это самый распространенный случай применения абсолютного центрирования (модальные окна, контент в секциях и т.д.). Если спросить о CSS центрировании, то в качестве стандартного ответа вы получите еще один вопрос: ты знаешь размеры элемента? Причина, по которой мы слышим это, является то, что если вы не знаете размеров элемента, то лучше всего будет положиться на CSS трансформации. Данный метод поддерживается не всеми браузерами, но он очень гибок. А если вы не знаете свойства CSS transform или вам известны ширина и высота элемента, легче будет работать со значениями внешнего отступа margin.

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

Нет размеров: используем трансформации; есть размеры: используем внешние отступы. Должно получиться примерно так:

После компиляции это будет выглядеть так:

Отлично, код выше выглядит немного большим, но помните, что мы его использовали только для демонстрации того, чего необходимо достичь. Скорее всего, вы вряд ли будете использовать все случаи в нашем примере.

Создание mixin’а

Итак, продолжим. Из предыдущих кусков кода мы уже знаем нашу сигнатуру: она содержит два опциональных параметра, $width and $height.

Продолжаем. В любом случае mixin должен абсолютно позиционировать элемент, поэтому можно начать со следующего.

Необходимо хорошо продумать код. Давайте остановимся пока на этом и проанализируем различные опции:

На основе таблицы:

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

После того, как мы получили каркас нашего mixin’а, осталось заполнить его нужным CSS.

Обратите внимание: #{0 0} – маленькая хитрость для предотвращения слегка агрессивного сворачивания из Sass, которое привело бы к отступам: margin: mt 0 ml вместо margin: mt 0 0 ml. Пока что все отлично.

Идем дальше

Существует пара способов расширить наш mixin, например, подключение @supports правила для проверки поддержки CSS трансформаций или для предложения (или разрешения) на использование библиотеки Modernizr со стилями отображения. Все это в зависимости от поддержки CSS трансформаций. Также можно сделать еще больше агрессивных проверок на правильность значений ширины и высоты.

Быть может, вы спросите, а стоило ли так усложнять наш mixin. Mixin сам по себе уже имеет сложность организации циклов шестого уровня, что достаточно облегчает Sass. Код по-прежнему нормальный, но, добавив пару строк, мы еще больше увеличиваем цикломатическую сложность.

А что насчет Flexbox?

Я уверен, некоторые из вас, читателей, прыгая на кресло, думаете, как бы применить Flexbox внутри родителя для центрирования элементов. И в самом деле, возможно, такое решение самое простое, если вы можете его себе позволить.
Основное различие между нашим примером и Flexbox в том, что последний работает с родителем, а наш способ работает с дочерними элементами (при условии, что любой из предков имеет свойство position отличное от static).

Для центрирования дочернего (их) элемента (ов) относительно родителя, вам необходимо напечатать пару-тройку свойств. Можете написать mixin, placeholder, класс или еще что-то.

С вендорными префиксами (через mixin или Autoprefixer) данный метод должен работать в большинстве браузеров.

Результат, как вы можете представить, будет таков:

Заключительные мысли

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

Глядя на код, любой поймет, что строка @include center подключает вспомогательный код со своей логикой, который центрирует элемент относительно родителя. Тем не менее, необходимо помнить, что для работы нашего кода первый родитель (или любой родитель в DOM) обязан иметь свойство position отличное от static!

Поиграться с кодом можно на SassMeister: http://sassmeister.com/gist/550809f5aa00b73d932c.

Автор: Hugo Giraudel

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree