Odds är, nu vet du allt om Sass och dess bröder (LESS, Stylus, etc.). Älskar dem eller hatar dem, dessa CSS-förprocessorer gör ett stort stänk i utvecklingssamhället. På många sätt representerar de ett snabbare och effektivare sätt att skriva CSS och om du kommer ombord, kommer du utan tvekan att uppskatta den flexibilitet som de tar med på ditt projekt.
När du är biten av CSS preprocessor bug kommer du oundvikligen att börja titta på HTML och undra varför det måste vara så besvärligt. Varför förenklar inte någon det sätt vi skriver upp? Det visar sig att samma personer som förde oss Sass har gjort just det med ett språk som heter Haml. Idag ska vi ta en titt och se hur man använder Haml för att helt ändra hur du skriver markering.
Vad är Haml?
I kärnan är Haml en lätt målspråk. Den närmaste motsvarigheten som du förmodligen är bekant med är Gruber's Markdown, som är funktionellt liknande men mer inriktade på författare.
Liksom Markdown gör Haml att skriva HTML mycket lättare, och när jag säger? Mycket lättare? Vad jag verkligen menar är? Du kommer inte tro hur mycket tid du kan spara genom att använda Haml.? Enligt min mening är det ännu mer en tydlig tidsbesparare än Sass. Många utvecklare tar en titt på Sass och tänker,? Snyggt! Men jag ser verkligen inte ett behov av det.? Med Haml borde nästan varje utvecklare, om de någonsin skulle samtycka till att använda den eller inte, omedelbart se de intensiva tidsbesparande fördelarna som det tar med sig till bordet.
Inte bara för Ruby Developers
Det stora problemet med Haml är att det kan vara skrämmande bara för att Haml-webbplatsen är så inriktad mot Ruby-utvecklare. En ledig HTML-utvecklare kommer att sluta med den här webbplatsen bara tillräckligt länge för att läsa uttalandet ? Haml är nästa steg för att generera visningar i din Rails-applikation.? Detta kombinerat med flera referenser till ERB skriker bara? Du hör inte till här? att släta gamla utvecklare på framsidan.
Det här är definitivt olyckligt, för som jag just nämnde kan alla som skriver HTML använda Haml på något sätt. Visst, du kommer inte att använda alla funktionerna, men jag är säker på att du inte använder alla Photoshop-funktioner heller, men du stannar det fortfarande dagligen.
Min poäng är, om du aldrig har skrivit en Ruby-linje i ditt liv och inte planerar att, låt det inte skrämma dig från Haml. Det är fortfarande oerhört roligt. Idag diskuterar vi Haml rent som ett sätt att skriva HTML så oavsett var du befinner dig i utvecklingsspektret du borde kunna följa med.
Din första linje av Haml
Nu när du har en grundläggande uppfattning om vad Haml är på en konceptuell nivå, är det dags att sparka på däcken och se hur det fungerar. Så småningom måste vi diskutera hur du kompilerar din Haml i HTML (oroa dig inte, det är enkelt) men försök nu ignorera det och ta bara in språket. När jag säger? Kompilerar till? vet bara att vi kommer att täcka denna process snart.
Skönheten i Haml är att det är? DRY?, Vilket innebär att det har gjorts ett försök att avlägsna så mycket av den irriterande inneboende HTML-repetitionen som möjligt. Tänk på exempel på strukturen av taggar. Här är en vanlig styvstruktur:
HTML:
Lägg märke till hur ens den enklaste biten av HTML innebär en viss repetition. Stämpeln måste placeras i början av uttalandet, och sedan måste en motsvarande stängningskod placeras i slutet. Vad händer om vi skulle kunna hoppa över allt detta nonsens? Här är samma uttalande i Haml:
HAML:
I Haml prefixar vi HTML-taggar med en?%? och det tar hand om resten. Men vänta på dig, hur skiljer man mellan två element utan stängningskoden? Svaret är givetvis att Haml är whitespace-beroende, vilket innebär att den använder den visuella strukturen för din kod för att bestämma HTML-utmatningen. Här är ett annat exempel som använder flera element och till och med boar några element inuti andra (listobjekten är kapslade i den oordnade listan).
HAML:
I vanlig gammal HTML är indragen i en orörd lista bara för visuell vägledning och har egentligen ingen semantisk mening. I Haml berättar emellertid kompilatorn att de listannonserna går in i den tidigare taggen, vilket i detta fall är ett ul.
Det kan vara svårt att förstöra din hjärna först, men koden ovan är koden nedan, vilket betyder att de är helt likvärdiga. Om vi skriver ut Haml ovan och matar in den i en kompilator spetsar den HTML-koden nedan.
HTML:
Som du kan se behöver HTML-versionen mycket fler tecken. Genom att använda Haml har vi sparat oss över trettio tangenttryckningar i det här lilla fragmentet. Expand detta koncept över en hel webbplats och du kan enkelt se konsekvenserna.
Klasser och ID
Utan den traditionella taggstrukturen kanske du undrar hur man kan deklarera extra HTML-objekt som klasser och ID-skivor. Haml är långt före dig och använder till och med en syntax som du hittar märkligt bekant.
HAML:
Som du kan se, är?.? och? #? Symboler används för att beteckna klasser och ID: er. Det här är bra eftersom du redan är bekant med den här metoden i CSS. Den förtrogen innebär att när du verkligen dyker in kommer du att kunna hämta Haml på nolltid. Så här sammanställer denna kod.
HTML:
Divs är magiska
Låt oss möta det, även med alla nya nya HTML5-element, älskar vi fortfarande våra divs.Med tanke på att detta specifika element är så vanligt har Haml tilldelat den en särskilt enkel syntax. Tänk på hur du tror att du kanske skriver följande HTML i Haml.
HTML:
Med tanke på vad vi har lärt oss hittills kommer ni utan tvekan att dra slutsatsen att någon form av?% Div? är nödvändig här. Men med Haml kan du hoppa över div-syntaxen tillsammans. För att skriva ovanstående HTML i Haml är det här allt du behöver.
HAML:
Det är allt! Denna kod sammanställs till en komplett div med ett ID för? SomeDiv ?. Även skeptikerna bland er måste erkänna att detta är ganska dangt koncist. Återigen ser vi de klara fördelarna med att kunna skriva vår markering som att vi skriver CSS.
Bara för att du verkligen har fått kärnan på hur det här fungerar, här är ett mycket mer omfattande exempel. Den här gången använder vi en huvud div och två inre divs tillsammans med många andra element.
HAML:
HTML:
Den här gången kan du verkligen börja känna Hamlets enorma kraft. Charmen här går utöver det faktum att vi har sparat massor av tecken och till och med några få rader, märker hur mycket lättare det är att läsa Haml en överblick. All den otäcka rotan som följer med HTML har avlägsnat bee bort och i sin plats är en tydlig hierarki av markup som direkt kan urskiljas.
Vad om HTML5?
Bara om du undrar, fungerar Haml bara bra med alla de coola nya taggarna inuti HTML5. Faktum är att det inte bryr sig om vilken typ av taggar du försöker skapa. Om du skriver ?% Somecrazytag? resultatet kommer att vara ?? oavsett det faktum att detta inte ens är giltigt HTML.
Här är ett snabbt exempel för att illustrera som använder HTML5-taggarna för ny rubrik, nav, avsnitt och sidfot.
HAML:
HTML:
Blanda det med HTML
En sista bra sak om Haml är att, precis som med Sass, kan du fortfarande kasta i den ursprungliga syntaxen när du vill och allt kommer fortfarande att kompilera bara bra. Jag gillar till exempel inte hur Haml hanterar att infoga enkla textlänkar (det är lite knäppt) så jag håller fast vid den vanliga HTML-syntaxen.
HAML:
Här blandar jag vanilj HTML med Haml och det är helt acceptabelt. När detta sammanställs är resultatet exakt vad du förväntar dig att det är.
HTML:
Det gör det väldigt enkelt att lätta på att använda Haml. Om du stöter på någonting som du helt enkelt inte kan ta reda på hur man gör, behöver du inte spendera timmar av forskning som letar efter lösningen, använd bara HTML!
Haml suger för innehåll
Ju mer jag undersökte Haml, ju mer jag insåg att jag inte är den enda som störde av sin länksyntax eller andra innehållsstrukturer. I själva verket skrev Chris Eppstein ett stycke med djärvt titeln Haml Sucks for Content där han till och med gjorde ett avtal med det uttalandet från Haml skaparen Nathan Weizenbaum!
Var noga med att läsa igenom det här inlägget innan du kommenterar den här eftersom det påpekar många giltiga Haml-kritiker som jag helt håller med. Den lösning som Eppstein erbjuder är att endast använda Haml för? Layout & design? syften. Han fortsätter sedan för att nå samma slutsats som jag gjorde: det är ok att använda HTML i din Haml. Ibland är det bara enklare.
Eppstein pekar också på andra möjligheter som att använda Haml Markdown-filtret för att markera ditt innehåll.
Verktyg för att kompilera Haml till HTML
Det här är den del där du kör för kullarna eftersom jag börjar prata om att installera Ruby-ädelstenar för att kompilera din kod rätt? Fel. Lyckligtvis behöver vi inte hoppa igenom några fina hoops eller till och med bryta ut kommandoraden för att kompilera Haml. Det finns gott om bra verktyg som gör det för oss.
Till att börja med finns det # haml.try-appen på den officiella Haml-webbplatsen. Det här låter dig skriva Haml i ett textfält och ta emot HTML-utmatning.
Men om du letar efter en online-kompilator kan du göra mycket bättre än det här enkla verktyget. Jag personligen gillar Rendera, som har en fin splitvy som visar din Haml-ingång och HTML-utgång sida vid sida. Du kan även växla mellan live HTML-utgången och källan.
Det är också intressant att notera att Tinkerbin stöder Haml. Det är inte sättet att gå om du vill kopiera och klistra in HTML-utmatningen, men det är förmodligen det bästa sättet att experimentera med Haml och Sass utan något installationsarbete.
För Mac-användare
Om du vill använda Haml i din lokala kodningsmiljö och råkar vara en Mac-användare har du tur eftersom det finns några fantastiska verktyg för att hjälpa dig. Det första du vill ladda ner gratis public beta av Chocolat, en fantastisk textredigerare som stöder blygsam syntaxmarkering för ett miljon olika språk, inklusive Haml. Det har också varit minst ett försök att skapa en Haml Espressosocker.
Tyvärr är den enda verkliga fördelen med att använda Chocolat att du inte behöver skriva in vanlig text, det kommer inte att kompilera din kod för dig. För det måste du titta på en annan gratis offentlig beta: Codekit.
Codekit fungerar med Haml, Sass, Mindre, Stylus och CoffeeScript. I grund och botten håller det ett öga på din projektmapp så att mycket tid du sparar eller uppdaterar en av dessa typer av filer (i vår fall en .haml-fil), bearbetar och matar den automatiskt den vanliga ekvivalenta filen. Också vara säker på att kolla in Live Reload, som fungerar på samma sätt men bor i menyraden.
Slutsats
Om du har hoppat på Sass, LESS eller Stylus bandwagon och letat efter en liknande lösning för HTML, är Haml ditt svar. Det låter dig skriva vackert enkel kod som både sparar tid och kan faktiskt vara lättare att läsa när du blivit van vid det.
Det olyckliga med Haml är att det är lite skrämmande för icke-Ruby-utvecklare bara för att dokumentationen är så inriktad mot Ruby. Jag lovar dock, även om du inte vet något om Ruby, är Haml fortfarande ganska roligt att gräva in och experimentera med för enkel HTML-utmatning.
Nu när vi har täckt grunderna, kom dit och prova Haml själv. Var noga med att kolla in Hamls hemsida för mer information och bokmärke detta Haml Cheatsheet för att hoppa till en snabb start.