Share
Inte så länge sedan såg vi på Grunderna för LESS, och det här är en bra referens för nybörjare, det finns mycket mer du kan göra med MINDRE! Målet med denna handledning är att utöka kunskapen från föregående artikel och ge dig några praktiska tips om hur du kan använda alla de stora sakerna om MINDRE.
Begreppen i den föregående artikeln kommer att vara avgörande för att man inte kan se den här. Variabler, mixins, funktioner och häckning i MINDER bör alla vara bekanta och du bör ha åtminstone några händer på kunskap om LESS.
Notera: det finns en hel del subjektiva råd i den här artikeln. Många saker vi ska diskutera har att göra med metodik i motsats till regler och föreskrifter i ett språk. Jag ska visa dig hur jag organiserar filer och skapar mixins, men det kan finnas andra, bättre sätt att göra saker. Om du tror att du använder en bättre struktur, eller om du har några tips och tricks, kan du inte släppa lös i kommentarerna.
Organisera dina filer är alltid oerhört viktigt, väldigt mycket så för mindre också. Jag brukar skapa en "stilar" -mapp i min huvudprojektkatalog där jag lagrar alla stilar som krävs för det projektet. Så vad händer om ditt projekt kräver att du innehåller css-filer från flera platser?
Det bästa sättet att göra ditt liv enkelt är att använda ett verktyg som Winless eller CodeKit. Med dessa verktyg kan du sammanställa olika filer till olika platser. Detta gör att du kan behålla alla dina stilfiler på en plats samtidigt som de faktiskt sammanställer dem till olika mappar över dina projekt.
Som du kan se, finns det i denna WordPress-projekt den markerade "style.less" -filen i mappen "stilar". Eftersom WordPress kräver en "style.css" -fil i huvudkatalogen behöver vi sammanställa den där. CodeKit eller ett liknande verktyg gör det enkelt eftersom du bara behöver ställa in den en gång och då kan du glömma det fram till projektets slut.
Ett annat problem som kan uppstå med CSS-filer är hur man hanterar tredje parts filer. Gridsystem, stilar för JavaScript-reglaget, återställer och mer kräver användning av (ibland flera) CSS-filer. Det finns vanligtvis två metoder för att detta ska ske. Du kopplar antingen filerna till din webbsida separat, eller placerar du all koden i en fil och minimerar den för performance-ändamål. Med ett MINDRE kompilatorverktyg blir det lättare igen!
Med hjälp av importregler kan du dra alla filer till ditt huvudsakliga LÄSER stilark. Du kan också importera mindre filer, göra deras regler, mixins och andra element användbara i alla efterföljande filer.
Notera: medan denna metod är användbar är det inte en universell lösning. I vissa fall kan du behöva inkludera alla filer separat, i andra kan det vara bäst att inkludera allt inom en fil.
Det största problemet med CSS är den extrema bristen på konsekvens i nästan alla projekt. Denna situation härrör huvudsakligen från själva språket, inte nödvändigtvis från programmerarens inept. CSS är ett mycket löst och förlåtande språk som innebär att det främjar konfigurationen över konventionen, medan den andra vägen skulle vara att föredra. Dessutom tenderar CSS att kodas ännu mer procedurellt än vanligt, vilket innebär att globala mönster inte alltid noteras och implementeras så enkelt som de kunde vara.
Medan LESS inte är en cureall, tillåter det dig att vara mycket mer konsekvent genom att ge dig verktyg som funktioner och häckning. Låt oss ta en titt på några exempel där du kan uppnå bättre överensstämmelse med MINDRE verktyg.
.radie (@radius: 5px) -webkit-border-radius (@radius); -khtml-gränsen-radien (@radius); -moz-gränsen-radien (@radius); -gräns-radien (@radius); -gränsradien (@radius); gränsstråle (@radius);
Utan MINDER skulle du behöva kopiera klistra in dessa regler när det behövs. Många skriver bara när de går så det är mycket mer sannolikt att du skulle glömma ett av prefixen eller skriva dem i en annan ordning. Medan dessa inte skulle vara dealbreakers för din webbplats lägger varje liten inkonsekvens till onödigt ljud till din kod.
Reglernas nästbara natur ger dig också chansen att lägga till order till din kod. Jag försöker använda så få divs och andra behållarelement som möjligt och jag försöker att rikta varje element så specifikt som möjligt
.kommentarlista .comment .comment-date . comment-time color: # 888;
Det verkar lite överflödigt först och jag håller med om, i viss mening är det. Men det gör allt superklart.
Användbarheten av detta kommer bara att vara uppenbart om du använder den i ett större projekt, men här är ett snabbt utdrag som visar hur en kommentar görs responsiv. Under en viss bredd är tidsdelen av kommentardatumet dolt för att spara utrymme.
@media-skärm och (maxbredd: 600px) .commentlist .comment-container .comment-main .comment-header .comment-date .time display: none;
Jag håller med om att det här ser hemskt ut. Men inget tänkande gick in på att skapa regeln. Inget tänkande innebär lätt backtracking eftersom du inte behöver räkna ut smarta knep du lagt till under vägen. Du kan också se vad den här regeln gör genom att titta på den.
Mitt sista argument för konsistens är en mer komplex, men jag tror att det är värt att titta på. Jag bygger WordPress teman till salu på ThemeForest och en funktion är att du kan välja vilken färg som helst för ditt tema. Elements recolored till ditt val. Så här görs det att varje gång en "primär färg" definieras, skrivs den över med den dynamiska CSS-koden vi exporterar med PHP. Det ser något ut så här ut:
Innehållet i vår MINDRE fil:
@ färg-primär: röd; .button bakgrund: @ färg-primär; vaddering: 8px 20px;
Innehållet i ett PHP ingår i slutet av HTML-rubriken:
I grund och botten, när det finns en referens till '@ color-primary' i den MINDRE filen behöver vi skapa en PHP-regel för att se till att färgerna som användaren valt återspeglas på webbplatsen. Det kan ta ett tag och viktigare är ytterst tråkig. För att kämpa för tristess skapar vi ett skript som analyserar vår LÄSER fil och skapar PHP-koden som vi bara kan kopiera-klistra på en gång. Det här är lite diffult eftersom det finns vissa dynamiska regler med funktioner och whatnot, men för att dra av det måste vår LESS-fil vara väl strukturerad och konsekvent.
En bra tidsbesparing och ett sätt att öka konsistensen över projekt är att använda ett gemensamt regelbibliotek. Tidigare frågade jag; varför skriva ut alla gränserradie regler när vi kan använda en mixin? Nu kan vi hoppa en nivå högre. Varför skriva om gränserradie mixin för varje projekt när du bara kan använda samma?
Det finns några mixins (speciellt de som klarar av leverantörsspecifikationer) som kommer att vara desamma över alla projekt. Dessa kan separeras ut i en "mixins.less" -fil som du kan använda var som helst du vill. Här är några exempel på mixins som alltid är praktiska att ha runt.
.opacitet (@opacity: 0.8) @ieopacity: @opacity * 100; filter: ~ "alfa (opacitet = @ ieopacity)"; -Khtml-opacitet: @opacity; -moz-opacitet: @opacity; opacitet: @opacity;
.gradient (@start, @end) bakgrund: @start; filter: ~ "progid: DXImageTransform.Microsoft.gradient (startColorstr =" @ start ", endColorstr =" @ end ", GradientType = 0)"; bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, @ start), färgstopp (100%, @ slutet)); bakgrund: -webkit-linjär-gradient (topp, @start 0%, @end 100%); bakgrund: -moz-linjär-gradient (topp, @ start 0%, @ än 100%); bakgrund: -ms-linjär gradient (topp, @ start 0%, @ 100%); bakgrund: -o-linjär-gradient (topp, @ start 0%, @ 100%); bakgrund: linjär gradient (topp, @ start 0%, @ 100%);
.elementfärg (@färg) när (ljushet (@färg)> = 60%) färg: @färg - # 888; .element-färg (@färg) när (ljushet (@färg) < 60% ) color: #fff;
Den här sista är speciellt cool. Om bakgrundsfärgen är ljus kommer textfärgen att vara en mycket mörk version av samma färg.
Jag föreslår alltid att du tänker på placeringen av den regel du skriver. Är du säker på att den används globalt för alla projekt? Det kan vara frestande att lägga en hel del regler där, men i verkligheten kan det vara bättre att skapa en projektspecifik fil också.
Kom ihåg bilden av kommentaren tidigare? Behållaren av det här elementet har ett visst format. Den har en vit kant och en grå kontur. Många andra element över det här temat delar det här mönstret. Detta kan skapas med en regel som så:
.rutan border: 1px solid #fff; skiss: 1px solid #dedede; .komment .box; bakgrund: #eeeeee;
Medan detta är används överallt här, det kommer inte att vara detsamma över flera projekt. Därför är det bättre att skapa en fil som "mytheme.less" som innehåller dessa ofta använda men temspecifika regler. Om du verkligen vill använda något som i den globala filen kan du expandera på det så här:
.box-bordered (@ border-color: #fff, @ outline-color: #dedede) border: 1px solid @ border-color; kontur: 1px solid @ konturfärg;
Med den här regeln kan du skapa samma boxstil lika lätt, men du kan också lägga till parametrar för att skapa olika färgade rutor. Du kan ta ett steg längre genom att abstrahera saker ännu mer och skapa en "bootstrap.less" -fil; Detta leder oss snyggt till vårt nästa ämne, skapar en ram för oss själva.
@ border-box-border-color: #fff; @ border-box-outline-färg: #dedede;
.box-bordered (@bc: @ border-box-border-färg, @oc: @ border-box-outline-färg) border: 1px solid @bc; kontur: 1px solid @oc;
Skapa ditt eget ramverk är vanligtvis ett nej, såvida du inte är mycket avancerad på ditt huvudområde (och 5-6 andra) och du har mycket bra anledning att. Med CSS och LESS är det lite annorlunda; du kan börja skapa din egen ram från dag ett. Eftersom LESS är en superset av CSS passar du bara in i befintlig kod. Eftersom CSS är förlåtande och kaskad kan du inte göra någon permanent skada som inte kan ångras.
Jag föreslår att du skapar en huvudmixins-fil till att börja med. Du kan alltid ta bort saker från det eller lägga till det efter behov. Senare kan du lägga till projektspecifika filer, tredje parts filer, en bootstrap-fil och så vidare. Så här är mina ramar organiserade.
Precis som med vilket språk som helst, innehåller praktiken i kodningen många olika utmaningar och tekniker som inte kan upptäckas och övervinnas genom att bara titta på dokumentationen. För att använda MINDRE till sin fulla omfattning bör du läsa förslag och försöka ta in logiken, men i slutändan måste du få erfarenhet. Konsistens, logik och enkelhet bör vara dina ledande ord och LÄSER ger dig alla verktyg för att uppnå detta.
Slutligen vill jag välkomna din inmatning och jag skulle vilja höra hur du organiserar LESS och hur du implementerar den i dina projekt. Tack för att du läser!
Accentsconagua