Compass 1.0 был официально выпущен 15 августа этого года. Многие люди держатся подальше от Compass из-за предположения, что сложно интегрировать Compass в ваш проект. Этот аргумент является абсурдом, если учесть, что команды Compass не сложнее, чем написание строки JavaScript.
Compass — мощный инструмент, если вы пишете Sass, со встроенными миксинами и функциями, которые делают написание сложных сайтов проще простого. Большинство людей переходят на Compass из-за воспринимаемой кривой обучения, но, как вы увидите, версия 1.0 упрощает использование Compass, как никогда.
Компас без командной строки
В обычных условиях вы бы инициализировали проект с помощью Compass. Это, в свою очередь, создает файл config.rb Многие из этих параметров связаны с поведением компилятора Compass. Даже если вы не используете Compass для компиляции Sass, вы все равно можете использовать Compass в своем проекте.
Все начинается с частичной именованной project-setup Импортируйте этот файл в файл Sass, который вы хотите использовать с Compass.
_project-установки
$project-path: absolute-path("..");
$debug-configuration: true;
@import "compass/configuration";
@include compass-configuration($reconfigure:true);
http-path = "/";
images-dir = "img";
fonts-dir = "fonts";
Давайте посмотрим на части, которые составляют этот файл project-setup
$project-path: absolute-path("..");
Установите ваш абсолютный путь проекта, этот глобальный используется для инициализации Compass при импорте compass\configuration
$debug-configuration: true;
Компас выведет отладочную информацию о конфигурации.
@import "compass/configuration";
Инициализирует Компас и делает доступными некоторые утилиты.
@include compass-configuration($reconfigure:true);
Настраивает компас в соответствии с вашими потребностями. Если вам нужно вызывать @include compass-configuration$reconfigure:true Это позволит вам установить несколько параметров, таких как:
http-path = "/";
images-dir = "img";
fonts-dir = "fonts";
Любой, кто знаком с использованием Compass из командной строки, заметит, что это многие из настроек, которые мы настраивали в config.rb Проверьте параметры конфигурации Compass для получения полного списка параметров и дополнительной информации об использовании Compass без командной строки. Вы заметите, что у нас нет возможности указать каталоги CSS и Sass, как мы делаем с Compass. Помните, что мы, вероятно, не компилируем с Compass, просто используем его библиотеку.
Поставщик префикса
Compass использует данные caniuse.com, чтобы вы могли определить уровень поддержки, которую вы намереваетесь предоставить для устаревших браузеров. Установив пороговые значения, вы можете указать Compass, какие функции вы хотите разрешить изящно ухудшать или нарушать. Compass автоматически добавит или удалит префиксы поставщиков на основе данных с caniuse.com.
.round_border { @include border-radius(2px 5px, 3px 6px);}
Этот миксин будет производить этот CSS
.round_border {
-webkit-border-radius: 2px 3px;
-moz-border-radius: 2px 5px / 3px 6px;
border-radius: 2px 5px / 3px 6px;
}
Как вы можете видеть, Compass добавил соответствующие префиксы поставщиков для соответствующих браузеров (-webkit для Chrome и -moz для Firefox). Также обратите внимание, что префикс webkit не поддерживает сокращение, поэтому передается только первое значение. Давайте посмотрим на некоторые из ключевых переменных, которые влияют на префикс поставщика:
$graceful-usage-threshold
Эта переменная предназначена для функций, которые могут постепенно ухудшаться (например, анимация ). По умолчанию используется значение 0,1 (0,1%), когда при удалении префикса будет затронут 1 из 1000 пользователей. В приведенном выше примере, когда использование Firefox достигает 0,1%
-moz-border-radius: 2px 5px / 3px 6px;
будет удален, так как это префикс для Firefox
$critical-usage-threshold
Для функций CSS, которые не ухудшаются изящно, таких как background-clip , его значение по умолчанию составляет 0,01 (0,01%). Когда будет затронут 1 из 10 000 пользователей, префикс будет удален.
$browser-minimum-versions
В некоторых ситуациях нам может потребоваться поддержка браузера независимо от того, сколько людей его используют. В этом случае мы можем установить минимальную версию браузера для каждого известного браузера.
$supported-browsers
Определяет, какие браузеры поддерживает ваш сайт. Все браузеры включены по умолчанию, но вы можете отключить определенные браузеры, отклонив их из списка. Перейдите сюда для получения дополнительной информации о префиксе поставщика .
Поддержка исходных карт
Если вы когда-либо разрабатывали большой сайт на основе Sass, вы знаете, что поиск ошибок может оказаться сложной задачей. Карты исходного кода позволяют вам увидеть базовый Sass, который сгенерировал ваш CSS, что позволяет разработчикам быстро отслеживать проблемный код Чтобы включить поддержку карты источника в Compass, достаточно добавить эту строку в файл config.rb
sourcemap = true
Теперь команда compass watch будет генерировать файлы карты CSS. После этого все, что вам нужно сделать, это включить инструменты разработчика Chrome DevTools или Firefox .
Поддержка более нового CSS
Настоящая причина использования Compass заключается в том, что все инструменты доступны для использования в ваших проектах. Это распространяется на новые разработки CSS, такие как анимация. Compass включает в себя множество миксов, которые позволяют легко создавать анимацию в ваших проектах. Помимо этого, Compass включает в себя множество инструментов и утилит для использования этих новых функций. Для получения дополнительной информации посетите страницу Compass CSS .
Вывод
Это лишь некоторые из функций, которые предлагает официальный выпуск Compass. Если вы еще не попробовали Compass, я бы посоветовал вам попробовать. Я гарантирую, что вы найдете функцию или миксин, который будет полезен в ваших проектах.