Почему я больше не пользуюсь компасом

Тем не менее, они настолько необычны, что я не могу считать математических помощников Compass веской причиной, чтобы оставить его в проекте. Для меня это слишком анекдотично. Тем более, что большинство этих функций можно заполнить только с помощью Sass (благодаря базовым математическим операциям). Например, вот чисто Sass-версия функции pow :

 /// Power function /// @param {Number} $x /// @param {Number} $n /// @return {Number} /// @source https://github.com/adambom/Sass-Math/blob/master/math.scss Sass-Math @function pow($x, $n) { $result: 1; @if $n >= 0 { @for $i from 1 through $n { $result: $result * $x; } } @else { @for $i from $n to 0 { $result: $result / $x; } } @return $result; } 

Если вам нужны расширенные математические функции в Sass, могу ли я порекомендовать взглянуть на Sassy-Math , легкую библиотеку Ruby Sass, в которой есть все математические функции Если вы хотите самостоятельно заполнить математическую функцию, ознакомьтесь с этой статьей . Также, Ана Тюдор написала об обратных тригонометрических функциях в Sass на The Sass Way.

Вы можете заполнить функции цвета

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

Хотя это не совсем так. В Sass Guidelines я объясняю, как, по моему мнению, использование функции mix часто более уместно, чем darken и lighten . Чтобы сделать использование mix немного проще, я написал две очень короткие функции, которые существуют в Compass :

 /// Slightly lighten a color /// @access public /// @param {Color} $color - color to tint /// @param {Number} $percentage - percentage of `$color` in returned color /// @return {Color} @function tint($color, $percentage) { @return mix($color, white, $percentage); } /// Slightly darken a color /// @access public /// @param {Color} $color - color to shade /// @param {Number} $percentage - percentage of `$color` in returned color /// @return {Color} @function shade($color, $percentage) { @return mix($color, black, $percentage); } 

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

Вы можете обойтись без помощников изображения

Давайте перейдем к реальной вещи. Компас, поскольку он написан на Ruby, предоставляет помощники изображений, такие как image-width и image-height которые возвращают размеры изображения на основе заданного пути. Насколько это здорово, особенно для техник замены изображений? Таким образом, вы можете изменить размер элемента по размеру изображения, не беспокоясь об изменении размеров.

 .logo { $logo-path: '/assets/images/logo.png'; width: image-width($logo-path); height: image-height($logo-path); // ... } 

К сожалению, у нас нет возможности заполнить такую ​​вещь. Sass не имеет доступа к файловой системе, поэтому невозможно определить размеры изображения.

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

SVG Sprite Builders — легионеры

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

 @import "compass/utilities/sprites"; @import "my-icons/*.png"; @include all-my-icons-sprites; 

Хорошо. Хотя не было строгого эквивалента для помощников изображений, мы все знаем, что существует бесчисленное множество разработчиков спрайтов. Взять, к примеру, Grunticon , конструктор SVG-спрайтов, работающий на Grunt . Он даже поставляется с браузерным приложением под названием Grumpicon . Вероятно, это один из лучших вариантов, так как он был выпущен Filament Group, но существует множество других вариантов, работающих на любом инструменте, плавающем на вашей лодке.

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

Несколько слов о LibSass

Компас не соответствует LibSass . Поскольку он по-прежнему сильно привязан к Ruby, невозможно использовать Compass в «среде LibSass». В мире, где LibSass с каждым днем ​​становится все больше и больше, я думаю, что независимость от движка — главная цель. Очевидно, что Крис думает так же и будет работать над его портированием на LibSass .

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

Отойти от Компаса, если вы этого хотите, должно быть относительно просто. Во-первых, убедитесь, что вы не используете никаких помощников от Compass, таких как tint или sqrt . Если вы это сделаете, то заполните их в своих файлах функций (просто Google их, вы скоро найдете чистую версию Sass). Затем избавьтесь от всех ваших CSS-префиксов и установите Autoprefixer в вашем проекте (если это возможно, очевидно). Наконец, перейдите к пользовательскому конструктору спрайтов, если вам это нужно.

Опять же, это не значит, что Компас плохой инструмент или что-то в этом роде. Наоборот , Компас — потрясающая структура! Если вы довольны Compass, продолжайте использовать его. Нет смысла отбрасывать инструмент, которым вы довольны, просто потому, что вы прочитали его из какой-то статьи, поэтому придерживайтесь Compass, если у вас все в порядке.

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