9 библиотек Mixin для дизайнеров Sass должны получить

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

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

1. Бурбон

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

Ознакомьтесь с полной документацией, чтобы использовать каждый доступный миксин и функцию.

2. Sass CSS3 Mixins

Sass CSS3 Mixins предоставляют миксины, которые работают в разных браузерах. Здесь вы найдете множество лучших миксов, таких как фон, рамка, рамка, столбец, шрифт, трансформация, переход и анимация. Этого достаточно для ваших потребностей в укладке. Чтобы использовать, импортируйте CSS3-mixins.scss и вызвать миксин в вашем классе CSS.

Скачать этот миксин здесь.

3. CssOwl

CssOwl предоставляет полезные миксины для установки положения элемента (относительного или абсолютного) и добавления содержимого с помощью псевдо-селектора ( :после а также :до). Это также помогает, когда вы хотите создать элементы спрайта: миксин дает гибкость, чтобы установить положение изображения в вашем спрайте. В дополнение к Sass, доступна библиотека смешивания CssOwl для LESS и Stylus..

4. Точка останова Sass

Точка останова помогает вам делать медийные запросы через Sass простым способом. С помощью точки останова вы можете создавать переменные и присваивать им значения, определяющие мин-ширина или же Максимальная ширина медиа-запросов. Поскольку созданная вами переменная имеет осмысленное имя, вы можете легко вызвать ее для использования в Sass.

5. Scut

Scut содержит набор многократно используемых микшинов, заполнителей, функций и переменных Sass, которые помогут вам легко реализовать общие шаблоны кода стиля. Он предоставляет передовой код для создания веб-материалов, таких как макеты страниц и стилизация типографики. Вы можете сократить количество повторений при написании кода, используя его чаще. Таким образом, помогая вам стать более организованным в процессе.

6. Шафран

С Saffron вы можете легко добавлять CSS3-анимацию и переходы. Доступны десятки анимаций и переходов, в том числе постепенное увеличение / уменьшение, скольжение / уменьшение, увеличение / уменьшение, а также различные эффекты, такие как встряхивание, колебание, отскок и другие. Чтобы использовать Saffron, просто включите миксин в объявление Sass и назовите имя эффекта внутри вашего CSS-класса. Вы можете получить Saffron, установив его с помощью Bower или Gem, или просто загрузить его вручную с Github..

7. Введите Настройки

TypeSettings - это тип инструментария для Sass. Он установит размер шрифта в модульном масштабе, используя em (вместо rems или пикселей), вертикальный ритм и заголовки, основанные на коэффициентах реагирования. Вы также можете установить его вместе с Bower, скачать релиз или клонировать репозиторий. Для более подробной информации, проверьте его страницу.

8. Sass Line

Sass Line - это миксин Sass, который поможет вам улучшить типографику. Он использует rems unit на вашем шрифте, чтобы вы могли работать с ним пропорционально от базовой сетки. Sass Line использует точный вертикальный ритм, основанный на базовой сетке, и позволяет вам установить модульную шкалу для каждой из ваших точек останова, чтобы получить хорошие пропорции во всех аспектах вашего сайта.

Зайдите сюда, чтобы получить более подробную информацию о том, как его использовать.

9. Andy.scss

Andy.scss - это коллекция полезных миксинов Sass, созданная, чтобы помочь вам с легкостью разработать внешний вид веб-сайта и сохранить его легким. Доступны десятки миксов Sass, от фонов до анимации. Здесь описаны почти все распространенные свойства CSS. Получите это в Github.

Больше сообщений на Sass:

• Начало работы с Sass
• Копаться в Sass
• Как скомпилировать Sass с возвышенным текстом
• Использование Bootstrap 3 с Sass
• Как создать онлайн VCard с Sass & Compass
• Сравнение CSS препроцессоров: Sass Vs. МЕНЬШЕ
• Синтаксически удивительные таблицы стилей: использование компаса в Sass
• Как конвертировать CSS в Sass & SCSS