Необхідно отримати бібліотеки Mixin для дизайнерів Sass
Якщо ви використовуєте Sass у вашому робочому процесі розробки, ви знаєте важливість mixins. Коли ви бачите деякі речі, які написані неодноразово і нудно в CSS, саме там міксини допоможуть запобігти повторній роботі. Міксін містить декларації CSS, які можна повторно використовувати на вашому сайті.
Є багато mixins, зроблених розробниками, щоб допомогти вам при роботі з Sass у вашій розробці. Більшість покриває речі, які часто повторюються в CSS. Від адаптація між різними браузерами до створення кнопок, анімації та ефектів переходу, Знайти це і більше в наступних 11 бібліотеках mixin, які ви повинні отримати для розвитку Sass.
1. Бурбон
Бурбон - це бібліотека Sass, яка містить mixin, функції та додатки, які дозволяють спростити створення таблиць стилів для крос-браузерного використання. Для мене це найдивовижніший Sass mixin. Він містить майже все, що потрібно для оформлення веб-сайту, зберігаючи при цьому вашу таблицю стилів легкою.
Перегляньте повну документацію, щоб скористатися кожним доступним змішувачем і функцією.
2. Sass CSS3 Mixins
Sass CSS3 Mixins надають суміші, які працюють у різних браузерах. Тут ви знайдете купу кращих практик міксинів, таких як фон, кордон, поле, стовпець, шрифт, перетворення, перехід і анімація. Цього достатньо для ваших потреб у стилі. Щоб скористатися, імпортуйте css3-mixins.scss і викликати mixin у вашому CSS-класі.
Завантажте цей mixin тут.
3. CssOwl
CssOwl надає корисні міксини для встановлення позиції елемента (відносної або абсолютної) і додавання вмісту з псевдоселектором ( : після і : раніше). Це також допомагає, коли ви хочете створити елементи спрайту: mixin дає гнучкість для встановлення положення зображення у спрайті. На додаток до Sass, бібліотека CssOwl mixin також доступна для LESS і Stylus.
4. Точка зупину Sass
Breakpoint допомагає зробити прості запити медіа-запитів через Sass. За допомогою пункту Breakpoint можна створювати змінні та надавати їй значення, яке визначає значення min-width або max-width медіа-запитів. Оскільки створена вами змінна має значущу назву, її можна легко назвати для використання в Sass.
5. Scut
Scut містить набір повторюваних міксів Sass, заповнювачів, функцій і змінних, які допоможуть вам легко реалізувати загальні шаблони стильового коду. Він надає найкращий практичний код для створення веб-матеріалів, таких як макети сторінок і типографіки стилів. Ви можете скоротити повторення під час написання коду, використовуючи найчастіше код. Таким чином, допомагаючи вам бути більш організованими в цьому процесі.
6. Шафран
З Saffron, ви можете додати CSS3 анімації і переходи з легкістю. Є десяток анімацій і переходів, у тому числі вицвітання, виведення / виходу, збільшення / вимикання, а також різноманітні ефекти, такі як тремтіння, гойдалка, відскік та інші. Для використання Saffron просто включіть mixin в декларацію Sass і викликайте ім'я ефекту всередині вашого класу CSS. Ви можете отримати Saffron, встановивши його за допомогою Bower або Gem, або просто завантажити його вручну з Github.
7. Введіть Параметри
TypeSettings - це тип інструментарію для Sass. Вона встановить розмір шрифту в модульному масштабі, використовуючи em (замість rems або пікселів), вертикальний ритм і відповідні заголовки. Ви також можете встановити його з Bower, завантажте реліз або клонуйте репо. Для більш детальної інформації перегляньте її сторінку.
8. Sass Line
Sass Line - це Sass mixin, який допомагає вам зробити кращу друкарню. Він використовує блок rems на вашому шрифті, так що ви можете працювати його пропорційно сітці базової лінії. Sass Line використовує точний вертикальний ритм, заснований на сітці базової лінії, і дозволяє встановити модульну шкалу для кожної з точок розриву, щоб отримати хороші пропорції для всіх аспектів вашого веб-сайту.
Перейдіть сюди, щоб отримати докладніші відомості про його використання.
9. Andy.scss
Andy.scss - це колекція корисних Sass mixins, створених, щоб допомогти вам розробити зовнішній вигляд веб-сайту з легкістю. Є десятки Sass mixins доступні, від фону до анімації. Тут висвітлюються майже всі властивості CSS. Отримати його в Github.
Більше повідомлень на Sass:
- Початок роботи з Sass
- Копати в Сасс
- Як зібрати Sass з високим текстом
- Використання Bootstrap 3 з Sass
- Як побудувати онлайн візитну картку з Sass & Compass
- У порівнянні з попередніми процесорами CSS: Sass Vs. МЕНШЕ
- Синтаксично стильні таблиці: використання компаса в Sass
- Як конвертувати CSS в Sass & SCSS
