Share
Susy is een krachtige set Sass-mixins voor het bouwen van grid-gebaseerde lay-outs.
Wat is er zo geweldig aan Susy? In deze tutorial laten we je de basis zien van werken met Susy, maar hier is een lijst met pro's om te overwegen:
Deze drie simpele pro's zijn meer dan voldoende om Susy een kijkje te geven. Laten we beginnen!
Ten eerste moet je genoeg bekend zijn met Sass om het te schrijven en te compileren. Op het moment dat dit wordt geschreven, implementeert Susy enkele Sass-functies die momenteel niet worden ondersteund door LibSass (de op C gebaseerde Sass-compiler), dus u moet de Ruby-versie van Sass gebruiken. Begin met het installeren van Sass en leer hoe u de kijk maar commando, wat essentieel is voor het werken met Sass in het algemeen, evenals Susy.
Vervolgens moet je Susy op je computer laten installeren. Omdat Susy's enige afhankelijkheid Sass zelf is, kunt u het zip-bestand van het project downloaden van GitHub en de inhoud van de Sass-map kopiëren naar uw project.
Vervolgens moet je Susy importeren in je Sass-bestand.
@import "susy";
Hierbij wordt ervan uitgegaan dat u zich in een map bevindt met de inhoud van de map Sass.
Susy is fundamenteel een reeks mixins, die als functies in Sass zijn. Deze mixins worden in je Sass-code genoemd en wanneer de Sass-compiler wordt uitgevoerd, worden de mixin-definities in de Susy-bestanden bekeken en wordt de juiste uitvoer bepaald.
De belangrijkste mixin in Susy is de span mixin, wat er als volgt uitziet:
.inhoud @omvat span (20%);
De span mixin vertrouwt ook op de houder mixin, die opstelt wat Susy een "lay-outcontext" noemt.
.container @include container (1180px);
Susy biedt u ook de mogelijkheid om overspanningen te maken op basis van een vooraf ingesteld aantal kolommen in een grid-set:
.kwart @omvat span (4 van 12);
Susy's kracht gaat veel verder dan het gemiddelde raster, waardoor minder dan normale rasterconfiguraties mogelijk zijn. Laten we beginnen met een eenvoudig voorbeeld: een indeling met 9 kolommen.
.negende @omvat span (1 van 9);
Susy stelt u in staat om configuratie via de $ susy variabel. Als u een Sass-kaart maakt, kunt u een aantal voorkeuren bepalen over hoe Susy werkt om uw overblijfselen in te delen. Susy implementeert een lay-out mixin die een configuratiekaart uitvoert. Dit zijn de standaardinstellingen, rechtstreeks overgenomen uit de documentatie van Susy.
$ susy: (flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-positie: center, kolommen: 4, goten: .25, kolom-breedte: false, global-box -sizing: inhoud-box, laatste-stroom: naar, debug: (afbeelding: verbergen, kleur: rgba (# 66f, .25), uitvoer: achtergrond, toggle: rechtsboven,), gebruik-aangepast: (achtergrondafbeelding : true, background-options: false, box-sizing: true, clearfix: false, rem: true,));
U kunt elke specifieke instelling overschrijven door deze aan uw eigen instelling toe te voegen $ susy kaart:
$ susy: (columns: 16, last-flow: from)
Vaak gewijzigde opties zijn de kolomtelling, de gootbreedte en de uitgang keuze. Elk van deze configuratie-opties doet iets anders.
In het belang van deze tutorial zullen we niet alle configuratie-opties doorlopen (de documentatie van Susy is een prima manier om ze uit te leggen). Laten we in plaats daarvan een paar praktische voorbeelden doornemen van hoe u Susy kunt gebruiken.
Hier zien we een basisgebruik van de span- en containermixins:
Notitie: om de kolommen op volle breedte te waarderen, bekijkt u de versie op het volledige scherm.
Er zijn een paar dingen om op te merken met dit voorbeeld. We hebben een geforceerd voorbeeld van een dashboard gemaakt. We hebben ook een klein beetje JavaScript toegevoegd waarmee nepgebruikersafbeeldingen worden opgehaald van de uifaces.com API.
De Susy-specifieke stukken zijn de kolommen. In dit voorbeeld hebben we een responsieve lay-out gemaakt met behulp van de @ include span () syntaxis. We gebruiken ook de nestmogelijkheden van SCSS op een paar plaatsen. Merk op dat Susy goed aansluit op uw normale mediaquery-syntaxis. We hebben een container gemaakt van de .stats sectie gebruiken @ include container;.
Er moet ook worden opgemerkt dat er geneste kolommen zijn in dit specifieke voorbeeld; de .avatar elementen zijn genest in een andere Susy-kolom, en dit werkt prima omdat Susy standaard standaardbreedten gebruikt.
Vervolgens zien we een gebruik van Susy's steno voor lay-out met een raster met grotere kolommen in het midden dan aan de buitenkant.
In dit voorbeeld gebruiken we een paar verschillende opties die voor u nieuw moeten zijn. Eerst maken we onze markup met Haml. Haml is een witruimtegevoelige markup-vervanging voor HTML die op Ruby is gebouwd. Zie het als een beetje als een preprocessor voor HTML.
Laten we eens kijken naar wat ons voorbeeld creëert.
.brick-lijst
Dit creëert een Deze ingesprongen regel herhaalt alles wat genest is binnen dezelfde inspringing 30 keer. Dit betekent dat alles wat wordt uitgevoerd binnen in de div zal zijn die we hierboven hebben gemaakt We zien dit in onze Een ander belangrijk onderdeel van deze lijnen is de Het Susy-raster is uniek in dit voorbeeld; we stellen een rastervariabele in met de regel: Deze variabele zal worden doorgegeven aan Susy in onze Vervolgens gebruiken we dit raster in het hele voorbeeld, waarbij we onze Hier is hetzelfde voorbeeld, met een andere asymmetrische lay-out. Zoals u kunt zien, zijn niet-conventionele rasters eenvoudig te realiseren en maakt Susy krachtige rasterbesturing tot een plezierige taak. Susy biedt een flexibelere en minder eigenzinnige manier om uw eigen rasterlay-outs te maken zonder u te dwingen een vooraf bepaalde set CSS te gebruiken. Dankzij die flexibiliteit kan Susy snel worden geleerd en in een project worden ingebracht zonder zich volledig te moeten verbinden om het te gebruiken in elke CSS-declaratie die u maakt. Of u nu bepaalt of Susy geschikt voor u is of niet, als ontwikkelaar van een front-end moet u zich ten minste bewust zijn van alle pre-processingtools die voor u beschikbaar zijn. Ze worden een belangrijke toolset voor moderne ontwikkelaars.brick-lijst.- 30. keer doen | i |
.brick-lijst. De | I | portie geeft de stroom door inhoudsopgave, dat is de telling van de lus, beginnend bij 0. Dus, bijvoorbeeld, op onze vijfde keer door de lus, ik zou gelijk zijn aan 4. .col% img src: "http://hhhhold.com/jpeg/700?v=#i"
30 keer lus. De .col creëert een div met een klasse van col. De % img ... creëert een # , waarmee u het kunt afdrukken ik index variabele (dit wordt genoemd interpolatie, als je meer wilt leren, legt Hugo Giraudel alles uit wat je moet weten). We gebruiken deze variabele in de URL als een parameter, zodat de afbeeldingen die we laden niet allemaal hetzelfde zijn.$ raster: (1 2 5 5 2 1);
span mixin roept en leest maak een raster met zes kolommen; de eerste kolom moet een relatieve breedte van 1 hebben, de tweede kolom van relatieve breedte van 2, de derde kolom van relatieve breedte van 5, enz...col divs op de 1e, 3e en 5e kolom startposities en spanning 2 kolommen met behulp van de n-kind CSS-regel. Als we ditzelfde raster zouden wijzigen om elke kolom met dezelfde relatieve kolombreedte te hebben, zou het er zo uitzien.Conclusie
Accentsconagua