• Главная
• Статьи и уроки
• Статьи о хостинге
• 10 библиотек SASS, которые помогут ускорить процесс разработки сайта

10 библиотек SASS, которые помогут ускорить процесс разработки сайта

SASS является одним из популярных CSS препроцессоров в настоящее время. Он дает разработчику при работе с таблицами стилей использовать такие инструменты как переменные, функции,, миксины, наследование и ветвление. Имеются сотни плагинов, библиотек и фреймворков для SASS, которые помогают уменьшить время разработки сайта.

В данной статье представлено 10 интересных библиотек SASS, которые стоят вашего внимания.

Gridlex

Gridlex – простая сетка css для разработки шаблонов и модулей. Её просто использовать. Достаточно обернуть вашу колонку (.col) контейнером сетки (.grid). Библиотека позволяет создавать адаптивный дизайн на основе медиа-запросов и поддерживает ветвление сетки непосредственно в колонке.

Buttons

Бесплатная библиотека SASS с открытым исходным кодом для создания настраиваемых кнопок. Позволяет быстро и просто делать отличные кнопки сочных расцветок для вашего сайта. В библиотеку включено большое количество стилей кнопок, включая варианты флат дизайна, со скругленными углами, 3D и другие.

Bourbon

Bourbon – простая легкая библиотека SASS для создания кросс-браузерных таблиц стилей. В неё включено почти всё, что нужно для разработки отличных сайтов — миксины, функции, дополнения. Библиотека совершенно независима и не требует конфигурации.

Sassy Inputs

Библиотека миксинов Sass для построения CSS3 стилей для форм ввода с минимальным размером и кросс-браузерностью. Включает миксины для создания полей для ввода текста, поиска, кнопок, чек-боксов, элементов выбора и радио кнопок. Sassy Inputs можно настроить. Для работы продуманы сочетания клавиш.

Saffron

Saffron - простая библиотека миксинов Sass для быстрого включения в ваш код анимаций и переходов для сайта. Библиотеку просто использовать. Нужно только добавить миксин в объявление и использовать переменную для включения желаемого эффекта. В библиотеку включено большое количество эффектов анимации и перходов состояния — затемнение, скольжение, подергивания и прочие.

mini.css

Легкий фреймворк для создания адаптивных вебсайтов. В сжатом виде занимает всего 10 Кб. Адаптивная сетка и набор компонентов позволяют быстро и просто реализовать любой дизайн для всех размеров экрана.

Angled Edges

Миксин Sass для создания скошенных граней на секции с помощью динамического SVG. В качестве фонового изображения создается векторный треугольник. Можно задавать его фоновый цвет, положение, заполнение, высоту, ширину и гипотенузу. Поддерживается всеми современными браузерами - Chrome, Firefox, Safari, Edge and including IE 9+.

Typesettings

С помощью Typesettings можно устанавливать размер шрифта для модульного масштаба в ems, вертикальный ритм и коэффициент адаптивности на основе базовой линии. По умолчанию. Размер базовой линии установлен в 6 px и поддерживается вертикальный ритм с рамками, выраженными в пикселях. Typesettings содержит всю математику для работы с ems и использует значения модульного масштаба для установки размера шрифта.

MaterializeCSS

Фреймворк для реализации дизайна в стиле материал. Его легко настроить и он адаптируется под разные размеры экрана. Во фреймворк включен большой набор компонентов — кнопки, карточки, формы, панели навигации, страничные переключатели и много другое. Совместим с браузерами Chrome, Firefox, Safari, Edge и IE 11+.

Include media

Библиотека Sass для быстрого создания медиа запросов. Содержит список переломных точек для смртфонов, планшетов и настольных компьютеров. Их легко настраивать, Можно писать медиа-запросы с использованием единиц em и rem, создавать псевдонимы для часто используемых выражений.

/_inc/images/articles/angled-edges.jpg

Источник: https: