Sass — мощный инструмент, но он, как любая власть, позволяет легко собой злоупотреблять. Одна из самых популярных ошибок — создание mixin, которые не нужны, на самом деле. Я сейчас имею ввиду не идеи вроде: «А давайте-ка, изобразим икосододекаэдр на чистом css3«, они имеют право на свой кусок почвы под солнцем. Я говорю о бесполезных миксинах, которые никому не приносят пользы.

Префиксы Border-Radius

Целых 0,26 % браузеров на данный момент не поддерживают стандартный border-radius и требуют специальных префиксов. Не 26 %, а всего 0,26 %. Только Firefox 3.6 и ниже, Chrome 4 и ниже, Safari 4 и ниже, Safari iOS 3.2 и ниже нуждаются в специальном префиксе для border-radius. И не спешите закидывать меня старыми клише: «Нужно думать обо всех пользователях», подумайте, что вы сможете сделать для пользователей IE6-8? Скорее всего, вы просто сообщите пользователю, что данный сайт не поддерживает его устаревший браузер. И таких пользователей раз в 10 больше, чем тех, кому можно помочь архаичными префиксами. Да и border-radius не является очень важным свойством, которое рушит всю разметку. Я еще не встречал сайт, который становился не читаемым или не рабочим при удалении border-radius.

Префиксы Box-Shadow

Здесь ситуация, аналогичная border-radius, только количество браузеров, требующих префиксов здесь в целых 2 раза больше — около половины процента. Повторюсь, это дополнительное украшение. Да, элементы с тенью выглядят симпатичнее, но не на столько, чтобы отпугнуть пользователя. Если, конечно, ваш дизайн не построен на этом эффекте.

Все с префиксами

Описанные два свойства никогда не будут нуждаться в префиксах, но вы можете использовать Sass миксины любых других префиксов. Я знаю, Compass и Bourbon уже содержат библиотеки, которые могут упростить работу с префиксами, но есть более интересный путь: Autoprefixer.  Эта библиотека легко может быть использована с Grunt, Gulp, Ruby gem CLI, Codekit и прочими инструментами. Её запуск сразу после сборки Sass позволит автоматически добавить нужные и удалить лишние префиксы, в зависимости от настроек. Удобно, не правда, ли? Пишем таблицы стилей по стандарту, и Autoprefix адаптирует их под несовместимые браузеры.

Autoprefix использует данные Can I Use для определения текущей поддержки браузерами стандарта css3. Реализовать поддержку последних трех версий браузеров с минимальным использованием в 3 %? Autoprefixer сделает это автоматически. Transition, transform, keyframe-анимация, flexbox, gradient и другие — все префиксы будут добавлены автоматически.

Непрозрачность

Opacity любят все, кроме IE8. Непрозрачность реализуется в IE8 через:

[css]filter: alpha(opacity=(50));[/css]

В данном случае можно использовать миксин. Если читабельность вашего сайта зависит от opacity, нужно использовать Modernizr для определения поддержки и подстраховки. По-моему, для IE8 большей проблемой является кривая поддержка цвета rgba() и hsla(). Если вы используете их, лучше всего подстраховаться:

[css].element {
color: rgb(243, 107, 33);
color: rgba(243, 107, 33 .5);
}[/css]

При необходимости точно передать цвета, я рекомендую, в качестве страховки rgba(), использовать Sass миксин mix() для смешивания переднего (прозрачного) и заднего плана. Пример рабочего миксина.

Вывод

Sass — клевая штука, только пока она используется по назначению. В следующий раз, после прочтения очередной статьи о создании миксинов, спросите себя: «Действительно ли будет полезен этот миксин?» и «Будущий миксин будет выдавать приличный и практичный или раздутый и избыточный css?».