Compass — отличная среда Sass. Не только потому, что он предоставляет сотню полезных миксов и функций, а также конструктор спрайтов, но также потому, что он позволяет авторам создавать свои собственные расширения, таким образом, используя другие авторские.
Расширение Compass — это некий комплект, упакованный в виде драгоценного камня, который можно установить, импортировать, а затем использовать в таблицах стилей Sass. Установка расширения Compass представляет собой трехэтапный процесс:
- В вашем терминале запустите
gem install {extension_name} - В вашем файле
config.rb(Compass) добавьтеrequire "{extension_name}" - В ваших
@include "{extension_name}"стилей добавьте@include "{extension_name}"
Первый шаг — установка драгоценного камня на ваш компьютер. Второй говорит Компасу использовать драгоценный камень. Третий импортирует содержимое расширения, чтобы его можно было использовать в ваших файлах Sass.
Довольно просто, не правда ли? Теперь, когда вы знаете, как их использовать, что если я покажу вам пару расширений Compass, которые определенно стоит попробовать? Помните, все, что вам нужно сделать, чтобы попробовать их, это запустить 3 команды, перечисленные выше. Кроме того, большинство из них включены в игровую площадку SassMeister, так что вы можете попробовать их онлайн.
Модернизр Миксин
Modernizr Mixin — это оболочка для API класса Modernizr, созданная Дэниелом Гилланом . Это расширение предоставляет чистый API для облегчения и нормализации использования классов Modernizr в ваших таблицах стилей.
Допустим, вы создаете что-то, что зависит как от CSS-преобразований, так и от непрозрачности. Вы можете написать что-то вроде этого в вашей таблице стилей:
.csstransforms.opacity { .element { /* Do something if both CSS transfroms and opacity are supported */ } }
Или, если вы создаете его наоборот, предоставляя запасной вариант, если какой-либо из двух не поддерживается:
.no-csstransforms, .no-opacity { .element { /* Do something if either CSS transforms or opacity is not supported */ } }
Хотя он хорошо читается, между двумя подходами уже есть несоответствие. Один использует .ab .c , а другой .a .c, .b .c . Таким образом, на первый взгляд может быть не очевидно, что здесь происходит.
Modernizr Mixin делает вещи лучше:
.element { @include yep(csstransforms, opacity) { // Do something if both CSS transforms and opacity are supported } }
Или снова, используя обратную логику:
.element { @include nope(csstransforms, opacity) { // Do something if CSS transforms and opacity are not supported } }
На мой взгляд, это выглядит довольно неплохо, поэтому, если ваше приложение использует Modernizr, вы можете попробовать этот миксин. Это действительно просто синтаксический сахар, но черт возьми, сахар это хорошо!
У меня была отличная возможность, чтобы Дэниел Гиллан написал о том, как он сделал свой миксин, в моем собственном блоге, поэтому, если вы хотите прочитать о его создании, обязательно посмотрите статью Дэниела .
Кавычки
Кавычки — это расширение Compass от Nico Hagenburger, которое помогает вам работать с кавычками в многоязычной среде.
Мы часто забываем, что у каждого языка есть свой способ обработки кавычек. При работе с несколькими языками в одном приложении важно соблюдать эти типографские правила. К счастью, CSS предоставляет псевдоэлементы и свойство content для этой цели.
По сути, кавычки это словарь цитат. Он имеет большую карту цитат Sass, связанную с языками, которую затем можно использовать с помощью простого миксина: localized-quotation-marks($languages) .
Допустим, ваш сайт поддерживает четыре языка: английский, французский, итальянский и немецкий и использует цитаты для отображения мнений клиентов. Поскольку вы поддерживаете несколько языков и имеете пользователей из разных стран, вам нужно, чтобы кавычки из кавычек адаптировались к языку. Теперь давайте немного разберемся.
// Importing the Compass extension @import "quotation-marks"; // Listing all supported languages $supported-languages: en, fr, it, de; // Outputing accurate quote marks on `blockquote` element blockquote { @include localized-quotation-marks($supported-languages); }
И это компилируется в:
@charset "UTF-8"; blockquote:lang(en):before, blockquote:lang(de):after { content: "“"; } blockquote:lang(en):after { content: "”"; } blockquote:lang(fr):before, blockquote:lang(it):before { content: "«"; } blockquote:lang(fr):after, blockquote:lang(it):after { content: "»"; } blockquote:lang(de):before { content: "„"; }тем@charset "UTF-8"; blockquote:lang(en):before, blockquote:lang(de):after { content: "“"; } blockquote:lang(en):after { content: "”"; } blockquote:lang(fr):before, blockquote:lang(it):before { content: "«"; } blockquote:lang(fr):after, blockquote:lang(it):after { content: "»"; } blockquote:lang(de):before { content: "„"; }тем@charset "UTF-8"; blockquote:lang(en):before, blockquote:lang(de):after { content: "“"; } blockquote:lang(en):after { content: "”"; } blockquote:lang(fr):before, blockquote:lang(it):before { content: "«"; } blockquote:lang(fr):after, blockquote:lang(it):after { content: "»"; } blockquote:lang(de):before { content: "„"; }того, как@charset "UTF-8"; blockquote:lang(en):before, blockquote:lang(de):after { content: "“"; } blockquote:lang(en):after { content: "”"; } blockquote:lang(fr):before, blockquote:lang(it):before { content: "«"; } blockquote:lang(fr):after, blockquote:lang(it):after { content: "»"; } blockquote:lang(de):before { content: "„"; }
Как видите, он не только делает свою работу, но и делает это хорошо! Действительно, в кавычках используются заполнители Sass для группировки похожих кавычек с целью уменьшения окончательного размера CSS.
Обратите внимание, что blockquote:lang(de) будет совпадать в любом из следующих сценариев:
-
<html lang="de"> <blockquote> -
<blockquote lang="de"> -
<html lang="de"> <blockquote lang="de">
Так что это здорово! Независимо от того, как вы решите эту проблему на переднем крае HTML, CSS останется прежним, все на основе кавычек. Нет оправдания тому, чтобы оставить эти уродливые цитаты по умолчанию сейчас!
SassyIcons
SassyIcons — это инструмент Sass, предназначенный для помощи в работе со спрайтами значков, SVG, откатами PNG, кросс-браузерной поддержкой и прочими сложными вещами. По сути, это оболочка для API спрайтов Compass , использующая классы Modernizr.
Он был разработан Pascal Duez и — в отличие от многих расширений — был протестирован на живых проектах, так что вы можете быть уверены, что он к настоящему моменту хорош .
У SassyIcons есть несколько целей:
- Дает вам возможность иметь несколько «тематических» спрайтов, управляемых в подпапках (например,
social, пользовательскийui,illustrationsи т. Д.) - Позволяет вам выбрать и настроить формат файла (SVG или PNG)
- Помогает вам с поддержкой разных браузеров (обратно в Internet Explorer 7) и дисплеев с высоким DPI
- Обеспечивает гибкость позиционирования для решения самых разных сложных ситуаций.
Теперь давайте перейдем к коду.
Сначала вы создаете спрайт-лист, давая ему имя (и интервал, если хотите).
@include sprite-map-create(social, $spacing: 10px);
Именно здесь используется спрайтовый API Compass. Там не выводится CSS, но генерируются два файла: один для обычного использования и один для дисплеев высокой плотности. Затем создается коллекция заполнителей для внутреннего использования.
Теперь, когда вы хотите использовать значок:
.twitter { @include icon(social, twitter); }
Первый параметр — это имя спрайт-листа, второй — имя иконки. Сгенерированный CSS зависит от параметров, но в большинстве случаев вы захотите использовать встроенный SVG с откатами PNG, что приведет к:
.twitter { background-image: url('data:image/svg+xml;base64,...'); background-repeat: no-repeat; } .no-svg .twitter, .no-js .twitter/*, other icons as well */ { background-image: url('../img/icons/social/png-s62add47933.png'); background-repeat: no-repeat; } .no-svg .twitter, .no-js .twitter { background-position: 0 -186px; }
Лучше не писать это вручную, а?
Если вы не хотите SVG, а только PNG, вы должны сделать это:
.twitter { @include icon(social, twitter, $format: "png"); }
Потом:
.twitter/*, other icons as well */ { background-image: url('../img/icons/social/png-s62add47933.png'); background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) { .twitter/*, other icons as well */ { background-image: url('../img/icons/social/png_2x-s177eed3133.png'); background-size: 32px auto; } } .twitter { background-position: 0 -186px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) { .twitter { background-position: 0 -141px; } }
Поскольку PNG не является векторным форматом, здесь он охватывает дисплеи высокой плотности с конкретными медиазапросами и спрайтом @ 2x.
Как видите, SassyIcons — довольно мощный инструмент для подключения к расширению спрайтов Compass. Если вы уже используете спрайты Compass, я не могу рекомендовать SassyIcons достаточно.
Кстати , grunt-svg2png также был сделан Pascal, поэтому оба инструмента полностью совместимы. Отличная комбинация для работы только с SVG, автоматизирующая все PNG.
SassyExport
SassyExport впервые появился как расширение для SassyJSON , анализатора JSON, написанного на Sass. Я предложил Иезекииля Габриэльса (
Автор SassyExport) избавиться от зависимости SassyJSON, переместив кодировку / декодирование JSON в Ruby. Так он и сделал.
SassyExport — это расширение Compass, которое выполняет одну функцию: экспортирует карту Sass в JSON. Таким образом, он предоставляет очень простой API в форме единого SassyExport() , SassyExport() .
@import "SassyExport"; $map: ( hello: world, ); @include SassyExport("/json/hello.json", $map, $pretty: true);
Первый аргумент — это путь, ведущий к файлу JSON для создания / обновления. Что здесь круто, так это то, что config.rb файл Compass config.rb который должен находиться на корневом уровне вашего проекта. Поэтому независимо от того, где вы вызываете этот миксин, он всегда будет приводить к одному и тому же файлу.
Второй аргумент — это карта, которую нужно преобразовать в JSON и экспортировать. И третий аргумент — должно ли это быть красиво напечатано. Если false , то JSON становится встроенным.
SassyExport может пригодиться, если вы хотите синхронизировать точки останова между Sass и JavaScript, но при этом они все еще определены в ваших таблицах стилей.
// _config.scss $breakpoints: ( "small": 767px, "medium": 992px, "large": 1200px ); // _export.scss @import "SassyExport"; @include SassyExport("/json/breakpoints.json", $breakpoints);
Затем вы .json файл .json подобный этому:
{ "small": "767px", "medium": "992px", "large": "1200px" }
Оттуда вы можете запросить этот файл с помощью Ajax-запроса или чего-то еще. Затем вы можете выполнить JavaScript только тогда, когда достигнута small точка останова.
Если позже вы измените этот 767px на, скажем, 750px , то ваш JavaScript не будет не синхронизирован — благодаря SassyExport.
Sass Color Helpers
К сожалению, Sass Color Helpers от Voxpelli (SCH) не является расширением Compass (пока), но я подумал, что стоит упомянуть. SCH, как следует из названия, предоставляет несколько функций Sass для управления цветами.
Среди прочего, он предоставляет функцию для вычисления точного альфа-канала для цвета для достижения определенного целевого цвета при наложении указанного нижнего цвета.
Это может быть полезно при извлечении цветов из плоского изображения, где вы можете оценить два цвета, которые отображаются поверх другого, но вам нужна помощь в определении альфа-номера верхнего цвета для достижения целевого цвета в изображении.
Например, представьте слегка прозрачный черный прямоугольник поверх изображения. При передаче цвета из изображения (выбранный цвет?), Целевого цвета (из макета) и цвета прямоугольника (в нашем случае черного) в функцию ch-calculate-alpha он должен возвращать приблизительный Альфа-канал должен быть применен к оверлею для достижения желаемого результата.
Давайте проиллюстрируем наш пример с помощью некоторого кода:
$overlay-color: black; $target-color: #16110e; // Color picked from the mock-up $bottom-color: #5e534f; // Color picked from the mock-up $alpha: ch-calculate-alpha($overlay-color, $bottom-color, $target-color); // 0.79464
Таким образом, для достижения желаемого результата необходимо применить следующий цвет к полупрозрачному черному наложению:
.overlay { $overlay-color: black; $target-color: #16110e; $bottom-color: #5e534f; $alpha: ch-calculate-alpha($overlay-color, $bottom-color, $target-color); // Accurate declaration background: $overlay-color; // Fallback IE 8 background: rgba($overlay-color, $alpha); }
И мы получаем следующий результат:
.overlay { background: black; background: rgba(0, 0, 0, .79464); }
В качестве альтернативы, SCH предоставляет обратную функцию, вычисляя верхний цвет на основе альфа-канала из наложения и нижнего цвета, так что вам решать, какой из них использовать.
Кроме того, SCH предоставляет функцию ch-color-contrast которая возвращает коэффициент контрастности между двумя цветами (на основе этого замечательного инструмента из Lea Verou), а также ch-best-color-contrast , которая возвращает цвет из списка заданные цвета с лучшим контрастом с первым аргументом, переданным функции.
$color-contrast: ch-color-contrast(red, purple); // 2.4 $best-color: ch-best-color-contrast(red, purple blue green yellow); // yellow
Это может быть полезно, когда у вас динамический фон, и вы хотите вычислить лучший цвет текста, чтобы соответствовать заданному фону.
И последнее, но не менее важное: SCH предоставляет некоторые функции преобразования HSV и HSB в HSL, которые идеально подходят для работы с системой HSV из Photoshop.
Последние мысли
Доступно гораздо больше выдающихся расширений Compass и инструментов Sass, включая такие популярные системы сетки, как Singularity и Susy . Но я думаю, что приятно, что мы также рассмотрели некоторые довольно неизвестные расширения.
И найти расширения Sass стало проще, чем когда-либо с Sache.in . У тебя там есть? 🙂