Share
Less.CSS blir ett populärt verktyg för att göra stylesheets "dynamic". Jag har arbetat med att integrera Less.CSS med WordPress ett tag nu, så idag ska vi titta på en kort handledning om hur man kommer igång med att använda det och BluePrint CSS-ramverket för ett snabbare arbetsflöde i WordPress.
Jag vet vad du tänker men beklagar folk, det betyder inte att du bara skriver LESS-kod. Hur många gånger har du arbetat med ett projekt och önskat att du skulle kunna förenkla saker genom att inkludera en funktion i din CSS-fil, med några variabler för att ändra färger eller andra egenskaper eller annan programmering som tekniker? Med mindre CSS kan din önskan förvandlas till verklighet.
Mindre är ett CSS-verktyg som gör att du kan påskynda och förenkla din utveckling genom att låta dig använda variabler, arv (via mixins), funktioner (operationer) och mer. I en nötskal, ger mindre CSS dig möjligheten att blanda programmeringstekniker med din CSS. Noga prata men. Låt oss börja!
Mindre kommer i två huvudsakliga smaker, en sammanställd version och en JavaScript-driven version. För vår diskussion ska vi fokusera på sammanställt version. Jag har valt att fokusera på den här versionen, främst för att jag inte gillar att inkludera filer på min webbplats som jag inte behöver. Trots allt, varje fil som din webbplats behöver fungera och ser attraktiva orsakar att webbplatsen laddas lite långsammare.
Så fungerar det som följer: Du besöker följande länk och laddar ner appen för Mac. Tyvärr Windows-användare, det är bara Mac, så den här versionen av handledningen fungerar bara för Mac-användare. När du har laddat ner appen måste du konfigurera din webbplatsstruktur (som jag kommer att täcka nedan).
Vi kommer att täcka en hel del innehåll i denna handledning. Jag tror på att arbeta så effektivt som möjligt med de bästa verktygen som finns tillgängliga. Av denna anledning kommer vi att anställa Wordpress och Plan att arbeta med detta projekt. Innan du går vidare till nästa steg, fortsätt och ladda ner Blueprint Framework.
Den enda filen vi ska använda är screen.css eftersom det kombinerar alla större filer som utgör ramverket i en fil. Gå vidare och hitta det och dra ut det till skrivbordet. För kortfattningsvis förutsätter denna handledning att du är bekant med att konfigurera WordPress samt grunderna för Blueprint. Om du behöver mer information om detta, lämna mig några kommentarer och jag kommer att svara eller kommer att skriva ett inlägg på det. Det finns också en informativ tut på Nettuts om Blueprint
För att ställa in din filstruktur, se skärmdumpen nedan. Det här är vad din katalogstruktur ska se ut, minus css-filerna i stylesheets-mappen. Dessa kommer automatiskt genereras för dig när du sparar en fil.
De viktiga sakerna att ta från denna skärmdump är att vi har en styles.css-mapp i temakatalogen i WordPress vilket gör lite knep. Den här filen drar bara i några andra filer från en underkatalog via @import-direktivet. Anledningen till detta är att WordPress använder kommentarerna i styles.css att identifiera ett tema. Att inte sätta i det tenderar att röra upp sakerna ganska dåligt. Genom att inkludera filer i styles.css fil via en sammansatt natur utnyttjar vi huvudsakligen alla dynamiska funktioner i Mindre CSS medan du ser till att vårt tema beter sig ordentligt i WordPress. Vi minskar vår CSS också för att påskynda webbplatsens laddningstid. Dessutom kommer det att ta bort alla kommentarer och vitt utrymme.
Det finns några inställningar som jag gillar att kolla. Det vill du också göra så bra. Nedan följer en skärmdump av dessa.
Placera därefter screen.css filen i en underkatalog som heter stylesheets tillsammans med en main.css-fil. Byt namn på båda dessa filer för att få en .lös förlängning istället för .css. När du har gjort det, fortsätt och skjut upp den mindre appen på din Mac och dra din temamapp i appen. Detta sätter väsentligen upp det så att mindre app vet om ditt projekt. Nu, varje gång du sparar dina mindre filer, blir de automatiskt sammanställda till CSS. Ganska trevligt va? Om det av en eller annan anledning inte händer så kan du klicka på kompilatorns flik och klicka på kompilera alla.
Okej, nu när allt detta är upprättat, vad gör Mindre egentligen för mig? Jag är glad att du frågade unga Padawan. Låt mig visa dig!
Så säg att du har några primära färger på din webbplats. Istället för att du måste sätta hex- eller RGBA-värdena varje gång du vill använda en färg, kan du helt enkelt använda en variabel för att lagra din färg och använd sedan variabelnamnet för att identifiera den färg du vill använda. Till exempel, för att lagra ljusgrå kan du deklarera en variabel som så:
@lightGray = #ddd; / * - och använd sedan det i din css så här: - * / div # box1 background: @lightGray;
Nu, när du behöver ändra din färg behöver du bara ändra värdet på @lightGray och det kommer att sprida allt ut till resten av din css-fil.
Nästa snygga trick jag vill diskutera är arv. För CSS nybörjare där ute betyder arv bara att en klass kan ärva eller hämta egenskaper från en tidigare klass (föräldraklass). Detta görs av en Mindre konstruktion som kallas Mixins. Dessa bäddar nästan alla egenskaper hos en klass i en annan klass. En av de coola sakerna om Mixins är att den egenskap du specificerar i din barnklass kommer att åsidosätta samma beteende som arvs från moderklassen. På vanlig engelska betyder det att jag har en klass som utgör mina knappar på min sida med hjälp av några praktiska css3-gradienter. Även om jag gillar polstring, teckensnittstorlek och andra attribut på knappen, kanske jag vill att mina färger ska ändras. Jag skulle göra följande:
/ * - Knapp som jag använder som bas / föräldraknapp - * / .myBlueButton display: block; vaddering: 4px 12px; bakgrund: rgb (30,87,153); / * Gamla webbläsare * / bakgrund: -moz-linjär gradient (topp, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232, 1) 100%); / * FF3.6 + * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, rgba (30,87,153,1)), färgstopp (50%, rgba (41.137.216 , 1)), färgstopp (51%, rgba (32,124,202,1)), färgstopp (100%, rgba (125,185,232,1))); / * Chrome, Safari4 + * / bakgrund: -webkit-linjär gradient (topp, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232 1) 100%); / * Chrome10 +, Safari5.1 + * / bakgrund: -o-linjär gradient (topp, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51% rgba (125,185,232,1) 100%); / * Opera11.10 + * / bakgrund: -ms-linjär gradient (topp, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba 125, 185, 232,1) 100%); / * IE10 + * / bakgrund: linjär gradient (topp, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100% ); / * W3C * / / * - Knapp som jag använder som barn / arvsknapp - * / .myGreenButton .myBlueButton; bakgrund: rgb (157,213,58); / * Gamla webbläsare * / bakgrund: -moz-linjär gradient (topp, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51% rgba (124,188,10,1) 100%); / * FF3.6 + * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, rgba (157,213,58,1)), färgstopp (50%, rgba (161,213 , 79,1)), färgstopp (51%, rgba (128,194,23,1)), färgstopp (100%, rgba (124,188,10,1))); / * Chrome, Safari4 + * / bakgrund: -webkit-linjär gradient (topp, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51% , rgba (124,188,10,1) 100%); / * Chrome10 +, Safari5.1 + * / bakgrund: -o-linjär gradient (topp, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1 ) 51%, rgba (124,188,10,1) 100%); / * Opera11.10 + * / bakgrund: -ms-linjär gradient (topp, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51 %, rgba (124,188,10,1) 100%); / * IE10 + * / bakgrund: linjär gradient (topp, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188, 10,1) 100%); / * W3C * /
Det finns ett försök att komma ihåg. Om du använder css3-gradientgeneratorn, verkar Mindre inte som linjen som börjar med filter. Som du kan se tar barnknappen allt uppträdande från föräldraknappen genom att inkludera attributen för den blå knappen på linjen märkt.
myBlueButton;
.
Det överstyrer sedan färgen genom att ange egna bakgrundsfärger. Nästa och sista punkt som vi kommer att täcka använder en parametrisk blandning (en blandning som tar parametrar) med Mindre. Detta är användbart i fall där du använder webbläsarspecifika prefix och liknande.
.borderRadius (@border_radius) -moz-border-radius: @border_radius; -webkit-radien: @ border_radius; -gränsen: @ border_radius;
Självklart finns det många fler beteenden och effekter du kan genomföra. Du kan följa länken längst upp på tut till Mindre webbplats och studera till ditt hjärtaninnehåll. Det finns också en snabb tipsvideo på Nettuts som talar om Less.js-biblioteket.
Det är grunderna för hur man sätter upp ett projekt som ska användas i WordPress med Less och BluePrint. Jag hoppas att det du lärde dig här idag kommer visa sig att vara till nytta för dig i framtida projekt. Om du har fler frågor, vänligen svara inte i kommentarerna.
Accentsconagua