Share
Sass is een geweldige manier om de ontwikkeling van de front-end in het algemeen te versnellen, ik gebruik het in al mijn projecten. Sass (zoals met alle andere preprocessors) maakt geneste stijlen, functies en vooraf geschreven code mogelijk in zogenaamde mixins. Foundation heeft een paar verschillende versies, momenteel hebben we de meest voorkomende HTML / CSS-varianten behandeld, maar nu laten we het hebben over een versie gebouwd op Sass.
Het team achter Stichting heeft niet alleen Sass gebruikt om vriendelijker en dynamischer te stylen, maar ze bieden ook meer maatwerk in de Sass-versie dan in de HTML / CSS-versie.
Sass is geweldig voor degenen onder u die, net als ik, eerst ontwerpers zijn en coders als tweede. HTML en CSS zijn eenvoudig genoeg om te leren en de klus te klaren, maar het is een grote sprong om van die simplistische talen naar jQuery en JavaScript te gaan. Met Sass kun je flirten met het idee van functies, variabelen en herbruikbare code die echt helpt bij de overgang naar meer complexe talen.
We gaan hier duiken, en we moeten terminal / opdrachtprompt gebruiken om dit te doen, maar laat je niet afschrikken omdat het gemakkelijker is dan het lijkt. Ga aan de slag met Terminal (OS X) en plak het volgende in:
sudo gem install zurb-foundation
Het kan even duren om te verwerken, maar zou moeten resulteren in een scherm als dit:
Zodra u deze stap hebt voltooid, heeft u de kern van de Foundation toegevoegd aan uw systeem, zodat u het opnieuw kunt gebruiken zonder naar de Foundation-site te hoeven gaan. Wat cool is aan deze benadering is dat je met een ander eenvoudig commando dit kern-herbruikbare framework kunt updaten naar de laatste openbare build- of release-kandidaat. Om dit te doen, plakt u eenvoudig een van de volgende in terminal:
sudo gem update zurb-foundation
sudo gem install zurb-foundation --pre
Er is nog een laatste stap in de installatieprocedure en dat is om Compass te installeren, waarmee we builds van Foundation kunnen maken voor gebruik in onze projecten. Nogmaals, dit kan enige tijd duren, dus wees geduldig. Plak in het volgende:
sudo gem installeer kompas
Na installatie zou u een Terminal-uitgang moeten hebben die er als volgt uitziet:
Nu we de wendingen van een robijnsteen hebben doorlopen en het up-to-date hebben gehouden, laten we een project opzetten zodat we deze weg van ontwikkeling met Foundation kunnen gaan analyseren.
Wanneer u een nieuw project wilt starten, opent u eenvoudig de terminal en typt u 'cd' (van directory veranderen), zonder de spraakmarkeringen. Vervolgens moet u een pad typen of een map voor uw project maken en het naar binnen slepen naar terminal. Zorg ervoor dat er een spatie is tussen "cd" en je pad. Volg dit met een opdracht die daadwerkelijk je project zal maken:
compass create YOUR-PROJECT-NAME -r zurb-foundation --using foundation
Zorg ervoor dat u de tekst "UW PROJECTNAAM" wijzigt voor uw werkelijke projectnaam en druk op Return. Je zult dan veel verschillende informatielijnen zien die resulteren in een keuze. Deze keuze bepaalt of uw Sass-bestanden worden geconverteerd naar CSS-bestanden wanneer u ze opslaat, of handmatig wanneer u ervoor kiest om ze te converteren. Ik gebruik altijd de tweede keuze, die automatisch CSS-bestanden maakt wanneer ik mijn Sass-bestanden opsla. Je zou zoiets als dit moeten zien:
U kunt hieruit zien dat er veel is gebeurd en dat uw op Foundation gebaseerde project is geboren. Nadat je je compileermethode hebt gekozen met behulp van de "kompas compileer" of "kompas kijken" methode, wil je misschien de code pakken die je onderaan de afbeelding kunt zien. Dit zal u enige tijd besparen aangezien het uw output stylesheet toevoegt en normaliseert.
Vanaf hier kun je beginnen met het daadwerkelijk bouwen van je project met behulp van Sass.
Als u Windows gebruikt, kunt u nog steeds de Sass-versie van Foundation gebruiken, er zijn nog een paar stappen nodig om aan de slag te gaan. Laten we eerst naar Ruby gaan. Ruby is wat ons zal toelaten om deze Sass-gebaseerde versie van Foundation te installeren. In tegenstelling tot OS X, heeft Windows dit niet standaard geïnstalleerd, dus we moeten het gaan halen.
Nu wilt u de nieuwste versie (2.0.0 op het moment van schrijven) en afhankelijk van de architectuur die u gebruikt, kiest u de standaard voor 32-bits machines of x64 voor 64-bits machines. Als u niet zeker weet wat, klikt u met de rechtermuisknop op 'Deze computer' en klikt u op 'Eigenschappen' om dit te weten te komen. Bij gebrek daaraan, ga met 32-bit.
Na het downloaden doorloopt u de installatie. Raak niets aan / wijzig niets, tenzij je weet wat je doet. Nadat de installatie is voltooid, ga je naar programma's en vervolgens naar Ruby en klik je op "Opdrachtprompt starten met robijn". Zodra dat is geladen, kopieert u de volgende code en plakt u deze in de opdrachtprompt. U doet dit door met de rechtermuisknop op de bovenste balk te klikken en te bewerken> plakken.
gem installeer zurb-foundation
U ziet iets dat hiermee overeenkomt:
U kunt Foundation ook up-to-date houden met de opdracht general public build of de opdracht release candidate:
edelsteen update zurb-foundation
gem installeer zurb-foundation --pre
Nu we de basishandelingen hebben ingesteld, laten we doorgaan en het laatste stuk Compass installeren. Net als voorheen kunnen we Compass installeren met behulp van een opdracht:
gem installeer kompas
Wees geduldig, dit zal resulteren in een scherm als dit:
Om uw project daadwerkelijk te maken, moet u overschakelen naar een map zoals "Desktop" en een opdracht uitvoeren. U kunt dit doen door "cd" zonder de spraakmarkeringen te typen, gevolgd door een spatie, gevolgd door een pad. Als u het pad zelf wilt toevoegen, kunt u er een in typen of gewoon de map slepen en neerzetten in de opdrachtprompt.
Nadat u de directory hebt gewijzigd, voert u deze opdracht uit en zorgt u ervoor dat u YOUR-PROJECT-NAME wijzigt voor uw werkelijke projectnaam.
compass create YOUR-PROJECT-NAME -r zurb-foundation --using foundation
En dat is het! Hierna zijn er geen verschillen tussen Windows en OS X..
Als u OS X gebruikt, is er een geweldige ontwikkelingstool genaamd CodeKit. Deze applicatie verkleint automatisch JS, CSS, SCSS- en converteert SCSS naar CSS, wat betekent dat je de terminal kunt doden en in plaats daarvan CodeKit kunt gebruiken. Het biedt ook foutmarkering voor zowel JS als SCSS, inclusief bibliotheken zoals jQuery.
Ik weet wat je denkt; "Ik heb OS X niet". Geen zorgen, ik ben je Windows-mensen niet vergeten - je kunt de dichtstbijzijnde equivalente applicatie genaamd Prepros pakken.
In het volgende deel zullen we kijken naar wat u kunt doen met deze meer dynamische op Sass gebaseerde versie van Foundation, inclusief het aanpassen van de build, het wijzigen van standaardstijlen en nog veel meer.
Accentsconagua