9 Mixin-bibliotheken voor Sass-ontwerpers moeten krijgen
Als u Sass gebruikt in uw ontwikkelworkflow, kent u het belang van mixins. Wanneer u sommige dingen ziet die zijn geschreven herhaald en saai in CSS, dat is waar mixins je kunnen helpen herhalend werk te voorkomen. Een mixin bevat CSS-verklaringen die u overal op uw site kunt gebruiken.
Er zijn veel mixins gemaakt door ontwikkelaars om u te helpen bij het werken met Sass in uw ontwikkeling. De meeste hebben betrekking op dingen die vaak repetitief zijn in CSS. Van aanpassing aan meerdere browsers naar het maken van knoppen, animaties en overgangseffecten, vind dit en meer in de volgende 11 mixin bibliotheken die je zou moeten krijgen voor je Sass-ontwikkeling.
1. Bourbon
Bourbon is een Sass-bibliotheek die mixin, functies en add-ons bevat waarmee u het maken van stylesheets voor cross-browser gebruik kunt vereenvoudigen. Voor mij is dit de meest fantastische Sass-mixin. Het bevat bijna alles wat je nodig hebt om je website te stylen terwijl je stylesheet lichtgewicht blijft.
Bekijk de volledige documentatie om elke beschikbare mixin en functie te gebruiken.
2. Sass CSS3 Mixins
Sass CSS3-mixins bieden mixins die in verschillende browsers werken. Je vindt hier een aantal best-practice-mixins zoals achtergrond, rand, kader, kolom, lettertype, transformatie, overgang en animatie. Het is genoeg voor je stylingbehoeften. Om te gebruiken, importeert u de CSS3-mixins.scss en roep de mixin in uw CSS-klasse.
Download deze mixin hier.
3. CssOwl
CssOwl biedt handige mixins om de positie van een element in te stellen (relatief of absoluut) en inhoud toe te voegen met de pseudo-selector ( :na en :voor). Het helpt ook als u sprite-elementen wilt maken: de mixin geeft flexibiliteit om de beeldpositie in uw sprite in te stellen. Naast Sass is de CssOwl-mixin-bibliotheek ook beschikbaar voor LESS en Stylus.
4. Breekpunt Sass
Breakpoint helpt u op een eenvoudige manier mediaquery's via Sass te maken. Met Breakpoint kunt u variabelen maken en deze een waarde geven die de min-width of Maximale wijdte van mediaquery's. Omdat de variabele die u heeft gemaakt een betekenisvolle naam heeft, kunt u deze eenvoudig voor gebruik in Sass gebruiken.
5. Scut
Scut bevat een reeks herbruikbare Sass-mixins, tijdelijke aanduidingen, functies en variabelen waarmee u eenvoudig veelgebruikte stijlcodepatronen kunt implementeren. Het biedt de beste praktijkcode om webdingen te maken zoals pagina-indelingen en typografische typografie. U kunt herhaling verminderen bij het schrijven van code door de code vaker te hergebruiken. Zodoende helpt u om meer georganiseerd te worden in het proces.
6. Saffraan
Met Saffron kunt u gemakkelijk CSS3-animaties en overgangen toevoegen. Er zijn een tiental animaties en overgangen beschikbaar, waaronder fade in / out, slide in / out, rise in / out en diverse effecten zoals schudden, wankelen, stuiteren en anderen. Om Saffron te gebruiken, voeg je de mixin toe aan de Sass-verklaring en roep je de effectnaam in je CSS-klasse. Je kunt Saffron krijgen door het te installeren met behulp van Bower of Gem, of het gewoon handmatig downloaden van Github.
7. Typ Instellingen
TypeSettings is een soort toolkit voor Sass. Het stelt de lettergrootte in op modulaire schaal met behulp van em (in plaats van rems of pixels), verticale ritme en op responsiviteit gebaseerde headlines. Je kunt deze ook met Bower installeren, de release downloaden of de repo klonen. Bekijk de pagina voor meer informatie.
8. Sass Line
Sass Line is een Sass-mix die je helpt betere typografie te maken. Het gebruikt de rems-eenheid op uw lettertype, zodat u het proportioneel kunt bewerken vanuit het basislijnraster. Sass Line gebruikt een nauwkeurig verticaal ritme op basis van het basislijnraster, en laat u een modulaire schaal instellen voor elk van uw breekpunten om goede verhoudingen te krijgen voor alle aspecten van uw website.
Ga hier naartoe voor meer informatie over het gebruik ervan.
9. Andy.scss
Andy.scss is een verzameling handige Sass-mixins, gebouwd om u te helpen de look van een website met gemak te ontwikkelen en tegelijkertijd licht te houden. Er zijn tientallen Sass-mixins beschikbaar, van achtergronden tot animaties. Bijna alle gangbare CSS-eigenschappen worden hier behandeld. Download het bij Github.
Meer berichten over Sass:
- Aan de slag met Sass
- Graven in Sass
- Hoe Sass compileren met sublieme tekst
- Bootstrap 3 gebruiken met Sass
- Hoe een online VCard te bouwen met Sass & Compass
- CSS Preprocessors vergeleken: Sass Vs. MINDER
- Syntactically Awesome Stylesheets: Compass gebruiken in Sass
- Hoe CSS te converteren naar Sass & SCSS
