MINDER är en vänlig, lättillgänglig CSS preprocessor. Trots att Sass och Stylus är mer kraftfulla och robusta har LESS en viss charm som håller den som föregångare i preprocessornas strid.
Om du är en Sass-fan kan du dra nytta av Compass, en otrolig ram som gör kodning med komplexa CSS3-egenskaper en bris. Men vad sägs om MINDER användare? Var är deras kompass? Idag ser vi på tre fantastiska mixin-bibliotek som hjälper till att fylla det tomrummet.
Vad handlar det om mindre?
Om du är en av CSS-kodarna som fortfarande finns på utsidan, tittar på CSS-förprocessorer men inte vet om du är skicklig nog att faktiskt använda en, är LESS ett bra ställe att börja.
Det första att tänka på är att förprocessorer faktiskt gör kodning lättare, även om de verkar som en stor komplikation först. För att börja, slå upp den MINSTA webbplatsen och ladda ner less.js.
Skapa nu ett .löst stilark (precis som ett .css-stilark, bara med en annan filtillägg) och släpp den i din HTML precis som något annat stilark. Också var noga med att släppa i JavaScript-filen.
? JavaScript-filen tar automatiskt hand om att du ändrar din LESS-kod till CSS som webbläsaren kan läsa.?Det är allt! Det var smärtfritt, eller hur? Fortsätt nu och skriv CSS precis som du alltid skulle ha i den .lösa filen och börja gradvis spela med fantastiska MINDRE funktioner som variabler och mixins. JavaScript-filen tar automatiskt hand om att du ändrar din LESS-kod till CSS som webbläsaren kan läsa.
Nu är den sak att komma ihåg att filen less.js är för teständamål. När du är redo att faktiskt ta den här sugaren bor, släpp din .lösa fil till Less.app eller något motsvarande och det kommer att spotta ut en vanlig gammal CSS-fil. Den vanilj CSS-filen är vad du ska använda i ditt slutliga utkast.
Håll dina MINDER filer kvar, men när du uppdaterar dem, kommer Less.app också att uppdatera din CSS-fil. Det är verkligen ett mycket enkelt arbetsflöde. Ge det ett skott, det är mycket lättare än du tror.
Vad med Sass?
Om du är en Sass-användare, grattis, är jag också. Men det här inlägget är inte tänkt att vara en MINDRE vs Sass-debatt, så klistra dig själv på baksidan och flytta i stället för att lämna mig massor av anti-LESS-kommentarer.
MINDRE MIXINTER
En av de bästa egenskaperna hos någon CSS-förprocessor är möjligheten att skapa mixins, vilket gör att du kan knyta en massa egenskaper och anpassningsbara värden till ett bra litet paket.
Här är ett exempel:
Detta tar alla boxskuggkod och sätter in det snyggt i en enda mixin som kan implementeras med egna värden (eller de standardvärden som vi använde ovan). Nu, istället för att skriva en stor bit av kod varje gång du vill ha en boxskugga, så är det allt du behöver:
Ganska fantastiskt rätt? När den här koden sammanställs kommer den att spotta ut som vanlig gammal CSS. Du får en mycket mer läsbar och lätt uppdaterbar kodbas utan att det går förbi webbläsarkompatibiliteten.
Spara tid med Mixin-bibliotek
Som du kan föreställa dig, finns det massor av möjliga mixins som nästan alla CSS-kodare kan dra nytta av att använda. CSS3 är fylld med uppblåst, redundant, prefix-fylld kod som helt enkelt är en smärta att skriva. Några pre-fab mixins för allt detta nonsens kan gå långt för att spara dig massor av tid och krångel när du bygger webbplatser.
? CSS3 är fylld med uppblåst, redundant, prefix-fylld kod som är rättvist en smärta att skriva.?Lyckligtvis finns det många människor i webbutvecklingsgemenskapen som har arbetat med just ett sådant projekt. Som jag nämnde i intro är Compass den ultimata resursen för Sass-användare, men bara för att det inte finns någon version av Compass för LESS betyder inte att du måste missa. Det finns några riktigt bra LESS mixin-bibliotek där ute och väntar bara på att du ska hoppa ombord. Låt oss titta på några.
MINDER Element
MINDER Element var en av de första solida LESS mixin-biblioteken som jag kom över. I själva verket är det ganska grundläggande, men det är en bra plats att börja:
Inkluderade Mixins
MINDER Element kommer med femton förbyggda mixins (igen, väldigt grundläggande). Här är vad som ingår:
- .lutning
- .bw-gradient
- .kantad
- .drop-shadow
- .avrundad
- .border-radie
- .opacitet
- .Övergångsperiod
- .rotation
- .skala
- .övergång
- .inre skugga
- .box-shadow
- .columns
- .Översätt
Som du kan se är många av dina vanliga CSS3-komplexiteter täckta här: gradienter, skuggor, jämn övergång.
Syntax
Syntaxen här är ganska enkel, de följer alla ganska mycket konventionerna av de normala CSS-egenskaperna. Som med alla MINDRE mixiner implementeras de via periodens syntax, så det ser ut och känns som att du håller en klass i en klass.
kritik
MINDER Element var ett bra projekt som hade mycket potential, men det realiserade aldrig riktigt den potentialen. Om, som jag, är du faktiskt van vid den fantastiska kombinationen av Sass och Compass, känner LESS Elements lite i jämförelse. Det är bara så mycket det är inte här är det svårt att bli upphetsad över vad som är.
? Det är bara så mycket det är inte här är det svårt att bli upphetsad över vad som är.?Det sägs att det finns massor av kodare där ute som föredrar enkelhet och behöver inte riktigt extra fluff, så det här kan fortfarande tilltala den publiken.
Utöver det faktum att MINDER Element är så grundläggande är den olyckliga sanning som, så långt jag kan säga, det inte har berörts på ett år. Med tanke på att CSS fortfarande utvecklas, eftersom nya funktioner implementeras och äldre funktioner äntligen når webbläsarstatus, är det mycket risk att basera ditt arbetsflöde på ett verktyg som är stagnerat.
I slutändan var det ett bra jobb här, men jag tror att vi kan göra bättre.
Mindre hatt
De fantastiska folket som förde oss CSS Hat släppte bara LESS Hat ett fantastiskt och modernt LESS mixin-bibliotek. Efter att ha kollat, kunde de inte hitta en anständig källa till MINDRE mixiner, så de gjorde sina egna!
Inkluderade Mixins
Det finns nitton mixins som ingår i LESS Hat, med keyframes (den tjugonde) på vägen. Som du kan se täcker det nästan allt som vi såg i MINDER Element och mer:
- .animering
- .keyframes (kommer snart)
- .utseende
- .backface-synlighet
- .background-clip
- .background-ursprung
- .background-storlek
- .border-radie
- .border-bild
- .box-shadow
- .box-sizing
- .columns
- .font-face
- .lutning
- .opacitet
- .perspektiv
- .storlek
- .omvandla
- .övergång
- .user-select
Faktum är att de är så stolta över deras funktionssats att de inte är rädda för att jämföra den med MINDER Element och jämn kompass.
Som du kan se är MINDRE HAT ganska mycket biet knän. De starka punkterna som du kommer att älska inkluderar möjligheten att implementera flera gradienter utan oro för äldre syntax, obegränsad boxskuggor, 3D-omvandlingar och även @ font-face support.
Syntax
Syntaxen för LESS Hat är faktiskt lite quirky. Du märker detta särskilt på några egenskaper där du kan implementera flera instanser av en egendom, till exempel med flera rutaskuggor.
Som du kan se har du citat och symbolen ~ för att hantera förutom den typiska parentesiska syntaxen. Vad händer här?
Svaret är ganska komplicerat. Det pekar på det faktum att MINDER själv inte spelar så snyggt med syntaxen för att inkludera flera egendomstillfällen. För att hantera detta, tar de in som en släppt sträng och sedan analyserar den inom varje mixin. Du kan läsa mer om detta här.
kritik
LESS Hat representerar en av de bästa tredje parten MINDRE resurser som jag har sett hittills. Mycket bra insats har lagts in här och resultatet är verkligen något som är bra. Om CSS Hat-killar håller på med det, kan det bli ett måste för MINSTA användare.
Kritiken här har i stort sett redan tagits upp. Det skulle vara trevligt att se keyframe-support, men det är tänkt att komma snart så det här kommer inte att vara ett långsiktigt problem. Syntaxen sänker ned på den mindre användarvänliga naturen, men det verkar vara en nödvändig ondska om du vill ha den typ av funktion som LESS Hat erbjuder.
Twitter Bootstrap och Preboot
Twitter Bootstrap är ett väldigt populärt front-end-ramverk född av det fantastiska arbetet med Twitter-utvecklaren Mark Otto. Bootstrap är i själva verket byggd och underhållen på en mindre grund, inte ren CSS.
Med tanke på att Bootstrap är en så fantastisk och otroligt stor uppsättning verktyg, gör det det till en av de mest imponerande samlingar av LESS-resurser som någonsin byggts.
Vad om Preboot?
Historiskt arbetade Mark Otto på ett projekt som heter Preboot.less, som var en samling LESS mixins. Detta projekt har utvecklats och blivit rullat in i Bootstrap men så ser det istället ut (Mark bekräftade för mig att Preboot nu är ett stagnerat projekt).
Bootstrap & LESS
Vill du ha mindre filer? Du har dem. Bootstrap levereras för närvarande med en hel del fyrtio .lösa filer, som kontrollerar alla dess olika aspekter och funktioner.
? Om du letar efter något som verkligen är i nivå med Kompassens djup och bredd, är Bootstrap ditt svar.? Om vi strikt jämför oss med de två tidigare bibliotek som vi använde tidigare, vill vi ta en titt på mixins.less-filen. Här hittar du mixins för gradienter, opacitet, skuggor, clear-fix, nätverket och mycket mer. Om du letar efter något som verkligen är i nivå med Kompassens djup och bredd, är Bootstrap ditt svar.
kritik
Som du kan berätta av mina tidigare inlägg är jag en stor Bootstrap-fan. Det är en väldigt solid resurs och ett bra sätt för Twitter att bidra till utvecklingssamhället.
? Alla dessa fantastiska mixins ingår i Bootstrap, men så långt som jag kan berätta, visas de inte riktigt i den aktuella dokumentationen.?Mitt huvudsakliga nötkött är att alla dessa fantastiska mixins ingår i Bootstrap, men så långt jag kan säga, syns de inte riktigt i den aktuella dokumentationen. Om de gör det, kan jag säkert inte hitta dem, vilket fortfarande är ett stort klagomål.
Andra resurser, till exempel LESS Hat, MINDER Elements and Compass, listar alla tydligt de inkluderade mixinsna med exempel på syntax, implementeringskod och ultimata resultat. Vi behöver något så här för Bootstrap mixins. Kanske är de egentligen bara avsedda för de faktiska Bootstrap UI-elementen, men var är det roligt i det?
Vilken är bäst?
Jag tycker att det är ganska uppenbart att LESS Hat och Bootstrap både sparkar byxorna av mindre delar, men mellan de två, vilket är bäst? Svaret naturligtvis beror på vad du behöver.
Bootstrap är inte en lista över mixins, det är en enorm ram med massor av resurser.Om du bara letar efter en handfull mixins kan du alltid ladda ner Bootstrap och ta tag i mixins.less-filen, men även det kan vara lite tungt för dina behov.
Däremot har LESS Hat en mycket mindre fotavtryck och försöker inte vara en omfattande ram. Den har de MINSTA mixiner som du behöver och inget annat.
Bottom line, om du vill fullständigt omdefiniera och systematisera sättet att bygga webbplatser, kolla in Bootstrap. Men om du bara är en MINDRE användare som letar efter några mixins rekommenderar jag definitivt att du checkar ut mindre hatt.
Om du är en MINDER användare använder du några mixin-bibliotek? Låt oss veta i kommentarerna.