Трябва да получат 9 библиотеки за дизайнери на Сас

Ако използвате Sass във вашия работен процес за развитие, знаете значението на mixins. Когато видите някои неща, които са написани многократно и досадно в CSS, това е мястото, където mixins може да ви помогне да предотвратите повтаряща се работа. Mixin съдържа CSS декларации, които можете да използвате отново в сайта си.

Има много миксини, които са разработени от разработчиците, за да ви помогнат, когато работите с Sass във вашето развитие. Повечето покриват неща, които често се повтарят в CSS. от адаптиране в множество браузъри да се създаване на бутони, анимации и ефекти на прехода, намери това и още в следните 11 смеси библиотеки, които трябва да получите за вашето развитие Sass.

1. Бърбън

Bourbon е библиотека Sass, която съдържа mixin, функции и добавки, които ви позволяват да опростите създаването на стилове за използване на различни браузъри. За мен това е най-прекрасният микс на Сас. Той съдържа почти всичко, от което се нуждаете, за да оформите уебсайта си, като същевременно запазите стиловете си леки.

Вижте цялата документация, за да използвате всеки наличен миксин и функция.

2. Sass CSS3 Mixins

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

Изтеглете този миксин тук.

3. CssOwl

CssOwl предоставя полезни миксини за задаване на позицията на елемент (относително или абсолютно) и добавяне на съдържание с псевдоселектора ( :след и :преди). Той също така помага, когато искате да създадете елементите на спрайт: mixin дава гъвкавост, за да настроите позицията на изображението във вашия спрайт. В допълнение към Sass, библиотеката на CssOwl mixin е достъпна и за LESS и Stylus.

4. Точка на прекъсване Sass

Breakpoint ви помага да направите медийните заявки чрез Sass прост начин. С Breakpoint можете да създавате променливи и да им давате стойност, която дефинира мин ширина или макс ширина на медийни заявки. Тъй като променливата, която сте създали, има смислено име, можете да я наричате лесно за използване в Sass.

5. Scut

Scut съдържа набор от многократно използвани Sass mixins, placeholders, функции и променливи, които ви помагат лесно да реализирате общи шаблони за стилови кодове. Той предоставя код за най-добра практика за създаване на неща в мрежата, като оформления на страници и в оформлението на стайлинг. Можете да намалите повторенията, когато пишете код, като използвате по-често кода. По този начин ви помагаме да се организирате по-добре в процеса.

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