Share
In deze zelfstudie bespreken we wat er kan worden gedaan met de flexibele Sass-stijlen in het kader van de Foundation. Veel van deze bieden een meer aanpasbare functies dan die van de CSS-versie, plus er zijn snelkoppelingen waarmee u items zoals de bovenste balk snel en gemakkelijk kunt stijlen.
Volg de instructies in Stichting Foundation With Sass en Compass of de documentatie van Zurb als u hulp nodig hebt bij het opzetten van Foundation met Sass. Je kunt de commandoregel gebruiken om dingen op te zetten met Compass en Bourbon, of je kunt gewoon de stand-alone Sass-bestanden van GitHub pakken, deze in je project plaatsen en elke bit importeren die je nodig hebt.
Laten we beginnen met het raster, want dit is de basis voor Stichting. Het is ook een geweldig onderdeel om je te laten zien hoe flexibel scss / sass kan zijn.
Als u bijvoorbeeld de mixins gebruikt die beschikbaar zijn voor het raster (mixins zijn overigens als snelkoppelingen naar vooraf geschreven code), kunt u uw eigen klassen maken, of zelfs uw eigen raster, door een paar eenvoudige variabelen te gebruiken. Laten we eens kijken naar het eerste voorbeeld dat Stichting u geeft:
/ * Mixin-opties maken van rijen * / @ opnemen rasterrij ($ gedrag); / * De standaardwaarde is false, wat de standaard rijstijlen * / $ gedrag zal opleveren: false / * Als het element dat u aan het maken bent als een rij genest is in een ander element * / / * dat ook een rij is, dan heeft u om de juiste neststijlen * / $ gedrag toe te voegen: nest / * U kunt deze optie gebruiken om de rijmarges van de container samen te vouwen * / / * Dit komt van pas bij het werken met formulieren binnen het rooster * / $ gedrag: samenvouwen / * Als u hebben een geneste rij en willen dat deze wordt samengevouwen, u moet deze optie * / $ gedrag toevoegen: nest-inklappen
U kunt hier zien dat we een mix hebben (deze worden aangeduid met het teken '@' -teken) met vierkante haakjes die een variabele bevatten. We beginnen met de mixin @ include rasterrij, specificatie van de opties tussen de haakjes.
Wanneer u een mixin maakt, kunt u delen van de vooraf geschreven code opgeven die elke keer dat u die mixin gebruikt, moet worden gewijzigd. Een eenvoudig voorbeeld zou zijn om een mix te maken die een lettertype toevoegt, samen met de grootte, het gewicht, de kleur enz., Maar misschien wilt u de lettertypekleur veranderen elke keer dat u de mixin gebruikt. Dit zou je tussen haakjes plaatsen.
In dit geval gebruiken we een variabele in de code, variabelen kunnen worden gebruikt om elke waarde in Sass op te slaan en beginnen met een '$' teken. Bijvoorbeeld:
/ * hier maken we het mixin * / @mixin-lettertype ($ color) font-family: 'Arial'; lettergrootte: 14 px; font-gewicht: 500; kleur: $ kleur; / * hier definiëren we een variabele om in te gebruiken * / $ blue = # 0099cc; / * en hier gebruiken we eigenlijk het lettertype mixin * / @include ($ blue);
Dus in deze code hebben we een mix gemaakt met de aanpasbare kleuroptie, hieronder hebben we een kleur gedefinieerd met behulp van een variabele $ blue daarna gebruiken we de mixin, verwijzend naar de haakjes van onze variabele $ blue, die gelijk is aan de hex-code # 0099cc.
Als we teruggaan naar het eerste codevoorbeeld, ziet u $ gedrag meerdere keren gebruikt. Dit lijkt misschien een beetje vreemd en een veel voorkomende interpretatie is "Wacht! Is dit niet alleen het overschrijven van de variabele elke keer?". In wezen geeft u een waarde voor elke optie in een soort lijst, ook wel een array genoemd. Elke keer dat u gebruikt $ gedrag de uitvoer komt overeen met de optie in de volgorde waarin ze zijn gedeclareerd.
U kunt ook meerdere variabelen in uw include zien:
@ include grid-column ($ columns, $ last-column); / * De meest gebruikte optie met een kolom * / / * Hiermee stelt u de breedteleigenschappen in voor de kolom, gebruikt u een getal voor kolommen * / $: # / * Gebruik deze optie als uw kolommen niet maximaal 12 bevatten. * / / * We zorgen ervoor dat de laatste kolom standaard zweeft: rechts om dingen uitgelijnd te houden * / / * Zet $ laatste kolom op true * / $ last-column als je dit niet wilt: false
Om dit echt in het juiste perspectief te plaatsen, maken we een raster met slechts heel eenvoudige HTML, omdat klassen niet overal in de buurt zijn, omdat alle stijlsnelkoppelingen in de Sass-code zelf worden ingesteld. Hier is een eenvoudig voorbeeld om een koptekst te maken.
$ rijbreedte: em-calc (600); $ kolomgoot: em-calc (30); $ totaal-kolommen: 12! standaard; header @ include grid-row; @include panel; opzij @ include grid-column (3); Sectie @ include grid-column (9); artikel @ include grid-row; header @ include grid-column (2); Div @ include grid-column (10);
Je ziet hier dat de html minimaal is en dat de sass het nesten perfect berekent, ik heb ook enkele globale waarden ingesteld voor de maximale breedte, de ruimte tussen kolommen en het aantal kolommen. Vanuit HTML-optiek bespaart dit een behoorlijke hoeveelheid tijd, maar deze denkprocessen achter de lay-out kunnen in het begin wat verwarrend zijn. Laten we nu eens kijken naar knoppen en hoe je ze kunt manipuleren met Sass.
Een van de leuke dingen over Sass is hoe snel je je pagina's kunt stylen en hoeveel tijd je bespaart zonder code te hoeven dupliceren.
U kunt eenvoudig naar de knopstijl gaan met behulp van iets eenvoudigs zoals:
.uw-klasse naam @ opnemen knop;
Voeg een paar opties toe en in slechts één regel code repliceerde u een stijl die zes of zeven regels CSS zou bevatten, wat een tijdbesparing!
Je zult ook opmerken dat er voor knoppen een heleboel opties zijn die niet bestaan in de CSS-versie en dit geldt voor alle Sass-elementen. Dit voegt echt een extra laag vrijheid toe aan de CSS-versie waarmee je eerder hebt gewerkt. Hieronder ziet u een voorbeeld van een knop die is opgebouwd met variabelen en vervolgens dezelfde maar met directe waarden, zodat u een goed idee krijgt van hoe deze werken.
.uw-klasse naam @ opnemen knop ($ opvulling, $ bg, $ straal, $ volledige breedte, $ uitgeschakeld, $ is-invoer); @inclusief inzet-schaduw ($ actief); .uw klassennaam @ opnemen knop (1em, # ca2727, 2px, false, false, false); @ include inset-shadow (true);
Dit is slechts een eenvoudig voorbeeld, maar het is een voorbeeld dat u waarschijnlijk op frequente basis zult gebruiken. Wanneer de code is gecompileerd, kom je op deze manier in CSS terecht (en zoals je je wel kunt voorstellen, zou de uitvoercode veel meer tijd kosten om te schrijven dan die van Sass):
.link border-style: solid; grensbreedte: 1px; cursor: pointer; font-family: inherit; lettertype: vet; regelhoogte: normaal; marge: 0 0 1.25em; positie: relatief; tekstdecoratie: geen; text-align: center; weergave: inline-block; padding-top: 1em; opvulling rechts: 2em; padding-bottom: 1.0625em; opvulling links: 2em; lettergrootte: 1.25em; achtergrondkleur: # ca2727; randkleur: # 9f1f1f; kleur wit; -webkit-border-radius: 2px; grensradius: 2px; -webkit-box-shadow: 0 1px 0 rgba (255, 255, 255, 0.5) inzet; box-shadow: 0 1px 0 rgba (255, 255, 255, 0.5) inzet;
Hoewel velen van jullie Sass als een andere wereldvreemde taal zullen zien, is het eigenlijk heel snel om op te nemen als je een paar regels hebt geschreven. De structuur is iets meer verbeterd in vergelijking met CSS en als je vastloopt kun je terugvallen op CSS met behulp van SCSS wanneer je absoluut moet.
Ten slotte is een van de minst geschreven functies van Sass de mogelijkheid om functies toe te voegen aan uw stylesheets. Dit zijn geen dynamische functies op de pagina (ze worden uitgevoerd bij het compileren van uw Sass-code), maar ze bieden wel interessante mogelijkheden om nog meer tijd te besparen.
In Foundation is er bijvoorbeeld een handige functie voor het converteren van px naar em. Dit is fantastisch voor responsieve sites; stel gewoon de basis em-waarde in via:
$ em-base: 16px! standaard;
Wanneer u dan een em-waarde wilt gebruiken, waarvoor u normaal pixel tot em zou moeten berekenen, gebruikt u eenvoudigweg:
Hoogte: em-calc (46);
"46" is het aantal pixels en em-calc de functie zijn. U kunt dit overal in uw Sass-code gebruiken waar u een pixelwaarde nodig zou hebben.
In het laatste bericht noemde ik Sass-compilers en de enorme voordelen die ze hebben bij het handmatig compileren. Deze keer ga ik je wijzen op een tool die ik nuttig heb gevonden in bijna elk project waaraan ik ooit heb gewerkt.
Vooral als het over Foundation gaat, werk je met Sass, CSS, HTML en JavaScript, maar laten we vooral niet vergeten dat een groot deel van webontwerp draait om afbeeldingen, met name png- en jpg-bestanden. Het is absoluut noodzakelijk om webgeoptimaliseerde afbeeldingen te hebben, dus met behulp van imageOptim (OS X) of File Optimizer (Windows).
Deze hulpmiddelen comprimeren afbeeldingen zonder de kwaliteit te verliezen. Het is eigenlijk heel effectief en de compressie kan verbijsterend zijn, met enkele reducties tot 70%. Denk er over na; als je een png uploadt naar 100kb, zou je na de conversie kunnen kijken naar een bestand van 30 kb. Dit kan nog effectiever zijn als u gebruik maakt van sprite-afbeeldingen.
We hebben gekeken naar de basisprincipes van Sass, hoe het moet worden opgezet, wat je ermee kunt doen en hoe het je workflow kan versnellen. In het volgende stuk zullen we overgaan op iets opwindends; Stichting voor Rails. Dit zorgt voor een aantal coole dynamische functies die naast je HTML, CSS en JavaScript kunnen staan.
Accentsconagua