CSS -förbehandlare är ett oumbärligt verktyg för den moderna webbutvecklaren. Hur du kan göra det mer effektivt
Har du några frågor?
Implementeringen av designlayouten är omöjlig utan användning av HTML och CSS. Om markeringsspråket tillåter oss att skissa en mall från de nödvändiga elementen, omvandlar CSS denna mall till önskad form, som i källan. Det verkar som om du med hjälp av ren CSS kan göra sidan så som kunden ville se den.
Men om någon öppnar din enda CSS -fil och försöker justera något, är du säker på att koden kommer att vara läsbar, redigerbar, strukturerad och begriplig? Om ditt projekt är stort, består av många delar, är du säker på att du enkelt kan stödja det i framtiden? Om du använder en CSS -förbehandlare är svaret ja, och dessutom är detta sättet att automatisera layouten på webbplatser. Varför? Vi får reda på det nu.
Vad är en CSS -förbehandlare?
Enligt min förståelse är detta ett tillägg över standard CSS som utökar standardfunktionerna, lägger till lite funktionalitet och låter dig skriva mer läsbar och lättförståelig kod. Vid utmatningen sammanställs källkoden i den CSS vi är vana vid. Användningen av ett sådant verktyg i modern utveckling är ett "måste", och jag råder varje layoutdesigner eller utvecklare att bekanta sig med det. Det bör tilläggas att det finns mycket att välja mellan, eftersom det finns en hel del CSS -förbehandlare, men de mest populära bör lyftas fram:
- Nål
Alla ovanstående förbehandlare har nästan identisk funktionalitet, det finns bara mindre skillnader i syntax. Nu, tillbaka till den tidigare frågan: vilka fördelar ger förbehandlare för att göra vår kod mer bekväm och underhållbar? Detta är först och främst häckande. Denna funktion ger oss möjligheten att strukturera element, enkelt hitta föräldern till ett element, snabbt skriva pseudoklasser och pseudo-element och till och med använda BEM! Till exempel:
.Spår
färg: #fff
& __ titel
paddding: 10px
&: sväva, &: fokusera
färgen blå
Ta en titt på denna kod kod skriven i Sass. Allt detta konverteras till följande CSS:
Spår (färg: #FFF;)
.track__title (vaddering: 10px;)
.track__title: sväva, .track-titel: fokus (färg: blå)
Kortfattad, bekväm, begriplig, förälder-till-barn-struktur är bra, eller hur? Den andra, och inte mindre viktiga, fördelen är variabler. Principen för deras funktion är extremt enkel: namnet på en variabel börjar med $ -symbolen och sedan själva namnet. Vi skriver värdet åtskilt av ett kolon - det kan vara en färg i vilken lämplig form som helst, indragningsvärden, bredd, teckensnittsstorlek och så vidare. Som ett resultat får vi något så här:
$ btn-färg: blå;
$ font-main-size: 16px;
Och användningen kommer att se ut så här:
Blockera (
font-size: $ font-main-size;
}
Tänk bara hur bekvämt det är. Om du behöver ändra färgen på knapparna på hela webbplatsen behöver du bara göra det på ett ställe! Tja, låt oss gå vidare. Den tredje och största CSS -förbehandlaren kan erbjuda oss är användningen av mixins. Enligt vår vanliga förståelse är mixins funktioner som kan användas flera gånger utan att upprepa samma delar av koden (kom ihåg en av programmeringsprinciperna - DRY - Don't repeat yourself). För att vara ärlig använder jag inte mixins så ofta, tydligen fanns det inget så brådskande behov, men jag kommer ändå att visa några exempel. En av de funktioner jag använder mest är följande:
@function em ($ pixlar, $ context: $ browser-context) (
@if (enhetslös ($ pixlar)) (
$ pixlar: $ pixlar * 1px;
}
@if (unitless ($ context)) (
$ context: $ context * 1px;
}
@return $ pixlar / $ sammanhang * 1em;
}
Och dess tillämpning är följande:
kropp (
typsnitt: em (14px);
}
Ja, som du förstår är detta bara en konvertering av teckensnittsstorleken från PX till Em (länge lever de dagar då de för sådana bagateller brukade använda specialtjänster eller räknade sig på en miniräknare). Följande exempel sparar också mycket tid:
@mixin input-placeholder (
& .placeholder (@content;)
&: - moz -placeholder (@content;)
& :: - moz -placeholder (@content;)
&:-ms-input-placeholder (@content;)
& ::-webkit-input-placeholder (@content;)
}
Dess användningsområden:
inmatning, textområde (
@include input-placeholder (
färg: $ grå;
}
}
Det finns många fler exempel, men det är värt att börja använda mixins själv för att förstå hur användbart detta verktyg är. Det finns kanske ytterligare en anledning kvar som får dig att älska CSS -förbehandlare, och dess namn är modularitet. Det är 2018 och modularitet finns överallt - från HTML -mallmotorer till olika css -ramverk och projektbyggare.
Processen med att skriva HTML och CSS kan vara lite ansträngande och kräver många av samma uppgifter om och om igen. Uppgifter som att stänga taggar i HTML eller monotont visning av hexadecimala färgvärden i CSS.
Dessa olika uppgifter är som regel små och minskar effektiviteten något. Lyckligtvis har dessa och några andra ineffektiva uppgifter erkänts och utmanats av förbehandlare.
En förbehandlare är ett program som tar en datatyp och konverterar den till en annan datatyp. När det gäller HTML och CSS är några av de mer populära förbehandlingsspråken Haml och Sass. Haml konverteras till HTML och Sass konverteras till CSS.
Sedan starten, medan de löste några av de vanligaste problemen, har Haml och Sass hittat många ytterligare sätt att utöka möjligheterna med HTML och CSS. Inte bara genom att ta bort ineffektiva uppgifter, utan också genom att skapa tekniker som gör webbplatsutveckling enklare och mer logisk. Populariteten hos förbehandlare har också åstadkommits av de olika ramarna som stöder dem; en av de mest populära är Kompass.
Haml
CodeKit stöder också andra förbehandlare som du också kan tycka är användbara.
Doktyp
Den första delen av att skriva ett Haml -dokument är att veta vilken typ av doktyp som ska användas. När du arbetar med HTML -dokument är huvudtypen HTML5. I Haml identifieras dokumenttyper med tre utropstecken (!!!), följt av något specifikt om det behövs.
Hamls standarddoktyp är HTML 1.0 Transitional. Därför, för att göra det som HTML5, måste du passera siffran fem efter utropstecknen (!!! 5).
Redo HTML
Deklarerande element
En av de definierande funktionerna hos Haml är dess syntax och hur man deklarerar och häckar element. HTML -element innehåller vanligtvis start- och sluttaggar, men Haml -element har bara en starttagg. Objekt börjar med ett procenttecken (%) och sedan indrag definierar häckning. Du kan indraga i Haml med ett eller flera mellanslag, men det är viktigt att indragningen förblir densamma. Flikar och mellanslag kan inte kombineras med varandra och samma antal flikar eller mellanslag måste vara desamma i hela dokumentet.
Att eliminera behovet av start- och sluttaggar och den obligatoriska indragna strukturen skapar ett schema som är lätt att följa. När som helst kan markeringen skummas och ändras utan svårighet.
% body% header% h1 Hej världen! % sektion% p Lorem ipsum dolor sit amet.
Kompilerad HTML
Hej världen!
Lorem ipsum dolor sit amet.
Ordbehandling
Haml -text kan placeras på samma rad som det deklarerade elementet eller indragas under elementet. Texten kan inte vara samtidigt på samma rad som det deklarerade elementet och kapslad under den; det måste finnas antingen det ena eller det andra alternativet. Ovanstående exempel kan skrivas om enligt följande:
% body% header% h1 Hej världen! % sektion% p Lorem ipsum dolor sit amet.
Attribut
Attribut, liksom element, deklareras något annorlunda i Haml. Attribut deklareras omedelbart efter elementet, i lockiga hängslen eller parentes, beroende på om du vill använda Ruby eller HTML -syntax. Ruby-style attribut använder standard hash syntax inuti (), medan HTML-style attribut använder standard HTML syntax inuti ().
% img (: src => "shay.jpg" ,: alt => "Shay Hou")% img (src: "shay.jpg", alt: "Shay Hou")% img (src = "shay.jpg" alt = "(! LANG: Shay Howe") !}
Kompilerad HTML
Klasser och identifierare
Klasser och identifierare kan deklareras som andra attribut om så önskas, men de kan också hanteras något annorlunda. I stället för att ange klass- och id -attributen med sina värden inom parentes kan värdet anges direkt efter elementet. Genom att använda antingen en punkt för klasser eller hash för en identifierare kan värdet läggas till omedelbart efter elementet.
Dessutom kan attribut blandas genom att sammanfoga varandra i lämpligt format. Klasser måste separeras med punkter, och andra attribut kan läggas till med ett av de tidigare skisserade formaten.
% section.feature% section.feature.special% section # hello% section # hello.feature (role = "region")
Kompilerad HTML
Klasser och identifierare i Om en klass eller identifierare används i
då kan% div utelämnas och klass- eller id -värdet kan inkluderas direkt. Återigen måste klasserna anges med en punkt och identifierare med en hash.Fantastiskt .grymt. Lektion # komma igång. Lektion
Kompilerad HTML
Booleanska attribut
Booleanska attribut behandlas på samma sätt som om de vore i Ruby eller HTML, beroende på vilken syntax som används.
% input (: type => "checkbox" ,: Checked => true)% input (type = "checkbox" Checked = true)% input (type = "checkbox" Checked)
Kompilerad HTML
Undvikande text
En av fördelarna med Haml är möjligheten att beräkna och köra Ruby, men detta är inte alltid den önskade åtgärden. Text och kodrader kan undvikas med ett snedstreck (\), vilket gör att texten kan visas uttryckligen utan körning.
I exemplet nedan utförs det första = @author -exemplet av Ruby och får författarens namn från programmet. Det andra mönstret börjar med att ett snedstreck slipper texten och skrivs ut utan att det utförs.
Författare = @författare \ = @författare
Kompilerad HTML
Alternativ till att komma undan text
Ibland räcker det inte med att undkomma text och Ruby behövs för att generera önskad utmatning. Ett populärt exempel på detta är att försöka inkludera en period omedelbart efter en länk, men inte som en del av länktexten. Att placera en prick på en ny rad är inte acceptabelt eftersom det kommer att behandlas som ett tomt klassvärde, vilket orsakar ett kompileringsfel. Om du lägger till ett snedstreck framför punkt undgår karaktären, men lägger ett mellanslag mellan det sista ordet och punkten. Återigen, inte ger önskat resultat.
I dessa fall kommer Ruby -hjälpen till nytta. I exemplet nedan används hjälpen för att placera en punkt direkt efter det sista ordet, men utanför länktexten.
% p Shay - = lyckas "." gör% a (: href => "#") bra gjort
Kompilerad HTML
Shay - bra gjort.
Kommentarer (1)
Liksom element och attribut hanteras kommentarer något annorlunda i Haml. Koden kan kommenteras helt enkelt med ett enda snedstreck (/). Enskilda rader kan kommenteras med ett snedstreck i början av en rad, och kodblock kan kommenteras genom att vara kapslade nedanför snedstrecket.
% div / Kommentarrad Faktisk rad /% div Kommenterat block
Kompilerad HTML
Faktisk linje
Villkorade kommentarer
Villkorade kommentarer hanteras också annorlunda i Haml. Om du vill skapa en villkorlig kommentar använder du hakparenteser () runt villkoret. Dessa hakparenteser måste placeras omedelbart efter snedstrecket.
/% script (: src => "html5shiv.js")
Kompilerad HTML
Tyst kommentarer
Haml ger också möjlighet att skapa anpassade tysta kommentarer. Tyst kommentarer skiljer sig från grundläggande HTML -kommentarer genom att allt innehåll i en tyst kommentar efter sammanställningen tas bort helt från den sidan och visas inte i resultaten. Lugna kommentarer börjar med en bindestreck, följt av ett hashmarkering (- #). Som med andra kommentarer kan tysta kommentarer användas för att radera en eller flera rader genom häckning.
% div - # Raderad rad Faktisk rad
Kompilerad HTML
Faktisk linje
Filter
Haml erbjuder flera filter för att möjliggöra olika typer av input inom Haml. Filter börjar med ett kolon följt av namnet på filtret, till exempel: markdown, med allt innehåll för att filtrera bilagan nedanför.
Vanliga filter
Nedan finns några vanliga filter, inklusive den mest populära gruppen: css och: javascript.
- : cdata
- : kaffe
- : rymde
- : javascript
- : mindre
- : markdown
- : maruku
- : enkel
- : bevara
- : rubin
- : sass
- : scss
- : textil
Javascript -filter
: javascript $ ("knapp"). på ("klick", funktion (händelse) ($ ("p"). göm ("långsam");));
Kompilerad HTML
CSS- och Sass -filter
: css. behållare (marginal: 0 auto; bredd: 960px;): sass. behållare marginal: 0 automatisk bredd: 960px
Kompilerad HTML
Rubininterpolering
Som nämnts tidigare kan Haml utvärdera Ruby, och ibland kan det finnas fall där Ruby måste utvärdera inom vanlig text. I detta fall måste Ruby interpoleras genom att packa in den obligatoriska Ruby -koden.
Nedan följer ett Ruby -exempel som interpolerar som en del av ett klassnamn.
% div (: class => "student - # (@ student.name)")
Kompilerad HTML
SCSS och Sass
SCSS och Sass är förbehandlingsspråk som kompileras till CSS. De är lite som Haml och gör kodning enklare genom att erbjuda väldigt lite hävstångseffekt. Separat har SCSS och Sass samma ursprung, men tekniskt sett har de olika syntax.
För korthetens skull var Haml och Sass de enda förbehandlare som omfattas av denna handledning. De valdes också eftersom de är byggda med Ruby och passar direkt i Ruby on Rails -applikationer. De fick också enormt samhällsstöd.
När det gäller att välja vilken förbehandlare som ska användas är det viktigt att överväga vilken som är bäst för ditt team och projekt. Projekt inbyggda i Node.js kan förmodligen ha större nytta av Jade och Stylus. Den viktigaste aspekten att tänka på är dock vad ditt team är van vid att använda. Gör din forskning för varje projekt och välj det mest informerade beslutet.
Resurser och länkar
- Haml - HTML Abstraction Markup Language
- Sass - Syntaktiskt fantastiska stilark
- Sass Playground på SassMeister
Och när kommer dessa utvecklare äntligen att lugna ner sig och sluta mobba nybörjare!? Jag hann inte räkna ut det med CSS, och de säger till mig: "Alla riktiga layoutdesigners har redan bytt till förbehandlare under lång tid. Tja, vad en ren CSS på kvällen 2020!? "Vad ska jag göra?
För det första slutar utvecklare aldrig komma med ny teknik. Och professionella layoutdesigners är dem mycket tacksamma för det. Stilarkets språk CSS, uppfanns vid en tidpunkt då platser var primitiva. Men åren gick, sajterna blev mer komplexa och massiva, men layoutmetoderna förblev desamma. Layoutdesignerna tröttnade på att skriva liknande kodavsnitt. Det var omöjligt att snabbt ändra färgen på webbplatsen. Det fanns ett behov av mer automatisering av layout, och så var det CSS -förbehandlare koda. Och idag ska vi prata om en av dem, MINDRE förbehandlare.
Kompilerar LESS- och VS -kod
Allt du behöver sammanställa MINDRE kod är en kodredigerare VS -kod och expansion Lätt Mindre... Hur det fungerar?
- Skapa en stilfil med tillägget .mindre
- Efter sparandet genereras det automatiskt .css filen till samma mapp.
Varje gång du sparar ändringar, MINDRE filer sammanställs till CSS filer. Webbläsare har inte lärt sig förstå ännu MINDRE, de behöver CSS koda.
MINDRE variabler
Vi flyttar de mest använda egenskaperna till variabler. Webbplatsen använder vanligtvis upprepade färger och teckensnittsfamiljer. Vi lägger alla färger i variabler och sedan ersätter vi inte regelkoden utan variabeln i regeln. Du frågar: "Vad är fångsten? Jag behöver fortfarande förskriva något, vad är skillnaden?"
Huvudfunktionen är en snabb färgbyte. Färgen ändras bara en gång, i en variabel. Att byta ut färgen i en variabel kommer att ersätta färgen på alla sidor på webbplatsen. Bara detta chip är tillräckligt för att börja använda MINDRE... Vi förklarar variabler i MINDRE och spara de värden vi behöver i dem, vi ger namnen på variablerna meningsfulla.
@primary: # 194eb4;
@sekundär: # f2b834;
@framgång: # 4cb514;
@svart: # 000;
@white: #fff;
Nu skriver vi den vanliga koden, som vi gjorde i CSS, men istället för värden ersätter vi variabler.
MINDRE
div (
vaddering: 0;
svart färg;
}
Efter att ha sparat, kompileras CSS koda. Vi rör inte alls CSS fil, allt arbete utförs i MINDRE fil. Du kan lagra alla ofta upprepade egenskaper i variabler.
CSS
div (
vaddering: 0;
font-family: Roboto, sans-serif;
färg: # 000;
}
Mixins i MINDRE
Mixins användbart för att återanvända en uppsättning egenskaper - ramar, knappar, rubriker. En grupp av egenskaper som kan tillämpas på olika väljare.
Webbplatsen har flera knappar av samma typ av olika färger, men med samma typsnittsegenskaper. Låt oss skapa en mixin som hjälper till att automatisera processen med att skapa knappar.
Button_font (
text-transform: versaler;
teckenstorlek: 18px;
}
Lägg mixen till knappväljarens egenskaper.
Portfolio__button (
vaddering: 15px 80px;
färg: # 344258;
.knapp_font;
}
Vid utgången får vi:
Portfolio__button (
vaddering: 15px 80px;
färg: # 344258;
font-family: "DIN Pro Bold";
text-transform: versaler;
teckenstorlek: 18px;
}
Ampersand karaktär
Istället för att duplicera namnet på väljaren använder du ampersand -tecknet.
Portfolio__item (
position: relativ;
bakgrundsfärg: # 3c3c3c;
}
&: sväva (
bakgrundsfärg: #ccc;
}
}
CSS
.portfolio__item (
position: relativ;
bakgrundsfärg: # 3c3c3c;
}
.portfolio__item: sväva (
bakgrundsfärg: #ccc;
}
MINDRE mediefrågor
Det är möjligt att spela in mediafrågor precis inuti väljaren.
MINDRE
.header__title (
färg: # 344258;
typsnitt: 40px;
vaddering: 0 20px;
@media endast skärm och (maxbredd: 320px) (
typsnitt: 22px;
}
}
CSS
.header__title (
färg: # 344258;
typsnitt: 40px;
font-family: "DIN Pro", sans-serif;
vaddering: 0 20px;
}
@media endast skärm och (maxbredd: 320px) (
.header__title (
typsnitt: 22px;
}
}
Slutsats
Denna artikel avslöjar inte ens 25% av alla möjligheter som den erbjuder MINDRE... Och detta är inte nödvändigt, syftet med artikeln är att motivera nybörjare att börja använda förbehandlare. Börjar med det enklaste, gradvis övergår till det mer komplexa.
NetTuts + artikel skriven av Johnathan Croom 2012.
Huvudmålet med denna artikel är att visa fördelarna med att använda någon av de tre förberedarna Sass, LESS och Stylus som beskrivs i den. Denna recension är perfekt för nybörjare som just upptäcker denna aspekt av webbdesign.
I den här artikeln kommer vi att titta på fördelarna och fördelarna med att använda tre olika förbehandlare - Sass, LESS och Stylus.
Introduktion
CSS-förbehandlare skapades med det enda syftet att lägga till kraft och flexibilitet i CSS-formatmallar utan att bryta webbläsarfunktioner. Alla förbehandlare sammanställer koden som genereras med sin syntax till standard CSS -kod som kan förstås och användas av alla webbläsare, oavsett hur gammal den är ( webbläsare) var inte.
Det finns många fördelar som förbehandlare ger CSS-formatmallar, och i den här artikeln kommer vi att täcka bara några av dem, både välkända och inte allmänt använda. Låt oss gå ner till översikten.
Syntax
Den viktigaste delen när du skriver kod i en CSS -förbehandlare är dess syntax. Lyckligtvis för oss är syntaxen för alla tre förbehandlare vi ska titta på CSS-liknande.
Sass & mindre
Både Sass och MINDRE förbehandlare har standard CSS -syntax. Detta gör uppgiften att konvertera befintlig CSS-kod till syntaxen för någon av dessa förbehandlare enkel och snabb. Sass använder tillägget för sina filer.
1
.scss
, MINDRE - förlängning 1
.mindre
.
En typisk fil i Sass- eller LESS -syntax visas nedan:
/ * style.scss eller style.less * / h1 (färg: # 0982c1;) Du kan tydligt se att detta är normal CSS -syntax som konverteras perfekt till Sass (SCSS) eller LESS.
Det är viktigt att notera att Sass (SCSS) också har en äldre version av Sass -syntax som utelämnar semikolon och lockiga hängslen.
Även om denna syntax fortfarande kan användas i praktiken, är den utfasad och vi kommer inte att använda den i våra exempel.
Sass -syntax ( gammal version) som följer:
/ * style.sass * / h1 färg: 0982c1 Nål
För sina filer använder denna förbehandlare tillägget
1
.styl
... Stylus preprocessorsyntax är mer utförlig ( cirka. översättare: författaren förstörde något här), använder den standard CSS -syntax som grund, men tillåter olika kombinationer av parenteser, kolon och semikolon. Stylus syntax exempel:
/ * CSS-liknande syntax * / h1 (färg: # 0982C1;) / * lockiga hängslen utelämnade * / h1 färg: # 0982C1; / * utelämnade lockiga hängslen, kolon och semikolon * / h1 färg # 0982C1 Alla syntaxer som visas ovan är giltiga och kommer att kompileras till rätt CSS. Till exempel kommer denna kod att kompileras till standard CSS utan fel:
h1 (färg # 0982c1) h2 teckensnittstorlek: 1 .2em Variabler
I förprocessorer deklareras och används variabler i CSS -stilfiler. Variabler kan ta vilket värde som helst som är tillåtet i CSS (färg, nummer eller text) och kan refereras var som helst i CSS -dokumentet.
Sass
I Sass -förbehandlaren deklareras en variabel med symbolen
1
$
, medan variabelns namn och dess värde separeras från varandra med ett kolon, som det görs i CSS: $ mainColor: # 0982c1; $ siteWidth: 1024px; $ borderStyle: prickad; body (färg: $ mainColor; border: 1px $ borderStyle $ mainColor; maxbredd: $ siteWidth;) MINDRE
Variabler i LESS är exakt samma som i Sass, förutom att symbolen är placerad framför variabelnamnet
1
@
: @mainColor: # 0982c1; @siteWidth: 1024px; @borderStyle: prickig; body (färg: @ mainColor; border: 1px @ borderStyle @ mainColor; maxbredd: @ siteWidth;) Nål
Variabler i Stylus behöver inga tecken för sin deklaration, men kan fortfarande använda symbolen
, men när denna variabel anropas i koden, ersätts inte variabelvärdet. Med andra ord utförs inte följande operation:
mainColor = # 0982c1 siteWidth = 1024px $ borderStyle = prickad kroppsfärg mainColor border 1px $ borderStyle mainColor maxbredd siteWidth Kompilerad CSS
Var och en av filerna som presenteras som ett exempel kompilerar till exakt samma CSS -kod. Du kan använda din fantasi för att föreställa dig hur användbara variabler kan vara.
Tack vare dem behöver du inte ange ett färgvärde och sedan upprepa det tjugo gånger i CSS -koden. Eller så är uppgiften inställd på att ändra bredden på webbplatsen och för detta är det nödvändigt att "söka" koden på jakt efter detta värde.
Nedan är CSS efter sammanställning:
kropp (färg: # 0982c1; kantlinje: 1px prickad # 0982c1; maxbredd: 1024px;) Häckande
Om din CSS -kod har till uppgift att samtidigt referera till flera element som har samma förälder, är det en tråkig uppgift att skriva den här föräldern om och om igen.
Till exempel så här:
I stället kan vi med hjälp av förprocessorn placera alla barnväljare inom parenteser på förälderelementet. Dessutom symbolen
1
&
är en länk ( minskning) på huvudelementväljaren. Sass, LESS & Stylus
Alla tre förbehandlare har exakt samma syntax för kapslade väljare:
avsnitt (marginal: 10px; nav (höjd: 25px; a (färg: # 0982C1; &: sväva (text-dekoration: understruken;)))) Kompilerad CSS
Nedan visas den sammanställda CSS -utdata från ovanstående kod. Jämför med koden som vi skrev i början - exakt samma sak. Men vilken bekvämlighet det är att dra nytta av förbehandlaren!
sektion (marginal: 10px;) sektionsnav (höjd: 25px;) sektion nav a (färg: # 0982C1;) sektion nav a: sväva (text-dekoration: understruken;) Mixins
1
mixiner
är funktioner som gör att grupperade egenskaper kan återanvändas inom CSS -kod. Istället för att gå igenom hela koden för att leta efter raderna du behöver för att ändra dem, kan du nu göra ändringar bara en gång, inne i mixen. Blandning är särskilt användbart när du skapar specifika stilar för element eller vid prefix med webbläsarprefix. När ett mixin kallas inuti en CSS -väljare, känns argumenten för det mixinet igen, sedan tillämpas dess stilar på väljaren som kallade det.
Cirka. översättare: i exemplen nedan bör du vara uppmärksam på skillnaden i syntaxen för att deklarera och ringa mixin inuti CSS -väljaren för alla tre förbehandlare.
Sass
/ * Sass mixin kallas fel med $ borderWidth -argument, som standard är 2px * /@mixin-fel ($ borderWidth: 2px) (border: $ borderWidth solid # F00; color: # F00;) .generic-error (padding: 20px; margin: 4px; @include error ();) .login-error (vänster : 12px; position: absolut; top: 20px; @include error (5px);) MINDRE
/ * MINDRE mixin kallas fel med $ borderWidth -argument, som standard är 2px * /.error (@borderWidth: 2px) (border: @ borderWidth solid # F00; color: # F00;) .generic-error (padding: 20px; margin: 4px; .error (); / * Anslut ett mixin med namnet fel * /) .login-fel (vänster: 12px; position: absolut; topp: 20px; .error (5px); / * Anslut en mixin som kallas fel med ett $ borderWidth -argument på 5px; det vill säga argumentets värde åsidosätts * /
}
Stil
/ * Stylus mixin kallas fel med $ borderWidth -argument som standard är 2px * / error (borderWidth = 2px) (border: borderWidth solid # F00; color: # F00;) .generic-error (padding: 20px; margin: 4px; error (); / * Anslut ett mixin med namnet fel * /) .login-fel (vänster: 12px; position: absolut; topp: 20px; fel (5px); / * Anslut en mixin som kallas fel med ett $ borderWidth -argument på 5px; det vill säga argumentets värde åsidosätts * /
}
Kompilerad CSS
Sammanställning av alla tre förbehandlare resulterar i samma CSS -kod:
.generic-error (padding: 20px; margin: 4px; border: 2px solid # f00; color: # f00;). login-error (left: 12px; position: absolute; top: 20px; border: 5px solid # f00; färg: # f00;) Arv
När vi skriver CSS -stilar på ett "klassiskt" sätt, för att kunna tillämpa samma egenskaper på flera element i ett HTML -dokument, måste vi skapa kod så här:
p, ul, ol ( / * några stilar här * /
}
Allt fungerar utmärkt. Men om du behöver skriva stilar separat för någon av dessa väljare måste du skapa separata regler för var och en av dem. Och genast blir stilarkskoden rörig och svår att underhålla.
Däremot gäller arv. Arv är förmågan för vissa CSS -väljare att ärva egenskaper från en annan väljare.
Cirka. översättare: notera samma syntax för att ansluta (deklarera) arv i en CSS -väljare med hjälp av direktivet
1
@förlänga
.
Sass & Stylus
.block (marginal: 10px 5px; stoppning: 2px;) p (@extend .block; border: 1px solid #EEE;) ul, ol (@extend .block; / * Ärva egenskaper från klassväljaren. Block * /Kompilerad CSS
.block, p, ul, ol (marginal: 10px 5px; vaddering: 2px;) p (kant: 1px solid #EEE;) ul, ol (färg: # 333; text-transform: versaler;) MINDRE
MINDRE förbehandlaren stöder inte helt arv som Sass eller Stylus gör. Istället för att lägga till flera väljare till en enda fastighetsuppsättning behandlas arv som en blandning utan argument.
Stilar importeras för varje väljare. Nackdelen med detta tillvägagångssätt är den ständiga upprepningen av fastighetssträngar i den sammanställda CSS -stilen.
Så här kan MINDRE kod med arv se ut:
.block (marginal: 10px 5px; vaddering: 2px;) p (.block; kant: 1px solid #EEE;) ul, ol (.block; / * Arv av fastigheter från klassväljaren. Block * / färg: # 333; text-transform: versaler; ) Kompilerad CSS
.block (marginal: 10px 5px; vaddering: 2px;) p (marginal: 10px 5px; vaddering: 2px; kant: 1px solid #EEE;) ul, ol (marginal: 10px 5px; vaddering: 2px; färg: # 333; text-transform: versaler;) Som du tydligt kan se från koden, klassstilar
.
Importera
I CSS -gemenskapen för att importera stilar med hjälp av direktivet
1
@importera
det finns en ihållande negativ inställning, eftersom detta tillvägagångssätt genererar flera HTTP -begäranden till servern, vilket saktar ner webbläsaren och belastar själva servern. Importtekniken fungerar dock annorlunda i förbehandlare. I någon av de tre förbehandlarna infogar en fil i en annan effektivt koden från en fil till en annan när den kompileras, vilket resulterar i en enda CSS -fil.
Cirka. översättare: med andra ord, i förbehandlare är import nödvändig för att sammanställa en fil från flera. I standard CSS resulterar import i att en kod ersätts i en annan.
Observera att när du sammanställer en fil med en standardanslutning med hjälp av direktivet
1
@import "file.css"
den senare är inte sammanställd inuti den. Men mixins eller variabler importeras och används i stilfilen som förväntat. Importtekniken är mycket bekväm, eftersom den låter dig skapa många separata filer för korrekt organisation av projektet. / * fil. (typ) * / body (bakgrund: #EEE;) @import "reset.css"; @import "fil. (typ)"; p (bakgrund: # 0982C1;) Kompilerad CSS
@import "reset.css"; body (bakgrund: #EEE;) p (bakgrund: # 0982C1;) Färgfunktioner
"Färg" -funktioner är utformade för att omvandla färg när de kompileras. Dessa funktioner är extremt användbara när du skapar lutningar, mörkare färger när
1
sväva
och mycket mer. Sass
ljusare ($ färg, 10%); mörkare ($ färg, 10%); mättad ($ färg, 10%); desaturat ($ färg, 10%); gråskala ($ färg); / * returnerar gråskala för $ färg * / komplement ($ color); / * returnerar komplementfärg på $ color * / invertera ($ color); / * returnerar den omvända färgen på $ color * / mix ($ color1, $ color2, 50%); Ovanstående kod är bara en kort lista över färgfunktioner i Sass. En fullständig lista över alla tillgängliga funktioner finns i Sass -dokumentationen.
"Färg" -funktionerna kan användas var du än behöver för att arbeta med färger i koden. Ett enkelt exempel - en variabel med en färg deklareras, till vilken färgtonfunktionen tillämpas ytterligare i koden
1
mörkna
: $ färg: # 0982C1; h1 (bakgrund: $ färg; kantlinje: 3px fast mörkare ($ färg, 50%);) MINDRE
ljusare (@color, 10%); / * returnerar en färg 10% ljusare än $ färg * / mörkna (@color, 10%); / * returnerar en färg som är 10% mörkare än $ färg * / mättad (@färg, 10%); / * returnerar en färg som är 10% mer mättad än $ color * / / * returnerar en färg 10% mindre mättad än $ color * / spin (@color, 10); / * returnerar färgförskjutningen 10 grader till höger i förhållande till @color * / spin (@color, -10); / * returnerar färgförskjutningen 10 grader till vänster från @färgen * / mix ( @ color1, @ color2); / * returnerar resultatet av att blanda färgen $ color1 med färgen $ color2 * /
Listan över MINDRE förbehandlingsfunktioner finns på den officiella webbplatsen för LESS Documentation -projektet.
Nedan är ett exempel på hur "färg" -funktionerna kan tillämpas i MINDRE:
@färg: # 0982C1; h1 (bakgrund: @ färg; kantlinje: 3px fast mörkare ( @ färg, 50%);) Nål
ljusare (@color, 10%); / * returnerar en färg 10% ljusare än $ färg * / mörkna (@color, 10%); / * returnerar en färg som är 10% mörkare än $ färg * / mättad (@färg, 10%); / * returnerar en färg som är 10% mer mättad än $ color * / desaturera (@color, 10%); / * returnerar en färg 10% mindre mättad än $ color * /
För en fullständig lista över alla Stylus -förbehandlarens färgfunktioner, se projektets webbplats för Stylus Documentation.
Och ett exempel på att använda “färg” -funktionen i Stylus:
färg = # 0982C1 h1 bakgrundsfärgskant 3px fast mörkare (färg, 50%) Aritmetiska operationer
Tack vare förbehandlare är det nu enkelt och enkelt att utföra räkneoperationer inom CSS -kod. Denna funktion är ofta användbar.
Cirka. översättare: det är värt att nämna CSS3 -funktionen vid namn
1
calc ()
, som också låter dig utföra enkla aritmetiska operationer inuti CSS -kod.
Sass, LESS & Stylus
kropp (marginal: (14px / 2); topp: 50px + 100px; höger: 100px - 50px; vänster: 10 * 10;) Praktiska exempel
Så vi undersökte huvudpunkterna i vad och hur alla tre förbehandlare kan göra. Vi har dock aldrig berört det ögonblick då dessa möjligheter praktiskt tillämpas. Nedan finns en lista över riktiga webbapplikationer som använder förbehandlare samtidigt som de förbättrar hela koden avsevärt.
Webbläsarprefix
Ett av de mest slående exemplen på fördelen med att använda förbehandlare är att skriva egenskaper med webbläsarprefix som använder dem. När vi väl har skapat en mixin med stöd för webbläsarprefix, räddar vi oss från rutinarbete.
Till exempel, låt oss skapa för alla tre förbehandlare mixins för att runda hörnen av ett block:
Sass
@mixin border-radius ($ -värden) (-webkit-border-radius: $ -värden; -moz-border-radius: $ -värden; gräns-radie: $ -värden;) div (@include border-radius (10px);) MINDRE
.border-radius (@values) (-webkit-border-radius: @ values; -moz-border-radius: @ values; border-radius: @ values;) div (.border-radius (10px);) Nål
border-radius (värden) (-webkit-border-radius: värden; -moz-border-radius: värden; gräns-radie: värden;) div (border-radius (10px);) Kompilerad CSS
div (-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;) 3D -text
Skapa en 3D -effekt för text med en CSS -egenskap
1
text-skugga
är en bra idé. Det enda problemet är att arbeta med färg, vilket är ganska svårt och besvärligt. Med mixins och färgfunktioner kan vi skapa volymetrisk text och ändra dess färg i farten:
Sass
@mixin text3d ($ color) (färg: $ color; textskugga: 1px 1px 0px mörkare ($ Färg,
5%
),
2px 2px 0px mörkna($
Färg,
10%
),
3px 3px 0px mörkna($
Färg,
15%
),
4px 4px 0px mörkna($
Färg,
20%
),
4px 4px 2px #000
;
}
h1 {
textstorlek:
32pt;
@omfatta text3d (# 0982c1);
}
MINDRE
.text3d(@Färg)
{
Färg:
@
Färg;
text-skugga:
1px 1px 0px mörkna(@
Färg,
5%
),
2px 2px 0px mörkna(@
Färg,
10%
),
3px 3px 0px mörkna(@
Färg,
15%
),
4px 4px 0px mörkna(@
Färg,
20%
),
4px 4px 2px #000
;
}
spänna {
textstorlek:
32pt;
.text3d (# 0982c1);
}
Nål
text3d(Färg)
Färg:
Färg
text-skugga:
1px 1px 0px mörkna(Färg,
5
%),
2px 2px 0px mörkna(Färg,
10
%),
3px 3px 0px mörkna(Färg,
15
%),
4px 4px 0px mörkna(Färg,
20
%),
4px 4px 2px #000
spänna
textstorlek:
32pt
text3d(# 0982c1)
I exemplet för Stylus valde jag alternativet att skriva egendomen
1
text-skugga
på en rad, eftersom jag har utelämnat de lockiga hängslen här. Kompilerad CSS
spänna {
textstorlek:
32pt;
Färg:
# 0982c1;
text-skugga:
1px 1px 0px # 097bb7,
2px 2px 0px # 0875ae,
3px 3px 0px # 086fa4,
4px 4px 0px # 07689a,
4px 4px 2px #000
;
}
Högtalare
Jag tänkte på att använda variabler och numeriska värden för dessa variabler när jag precis började bekanta mig med CSS -förbehandlarnas möjligheter. Att deklarera en bredd för en layout i en variabel gör att uppgiften att ändra den bredden ( om nödvändigt) enkelt och snabbt:
Sass
$
siteWidth:
1024px;
$
rännvidd:
20px;
$
sidofältbredd:
300px;
kropp {
marginal:
0
bil;
bredd:
$
siteWidth;
}
.innehåll {
flyta:
vänster;
bredd:
$
siteWidth -
($
sidofältbredd+$
rännvidd);
}
.sidebar {
flyta:
vänster;
marginal-vänster:
$
rännvidd;
bredd:
$
sidofältbredd;
}
MINDRE
@siteWidth:
1024px;
@gutterWidth:
20px;
@sidebarWidth:
300px;
kropp {
marginal:
0
bil;
bredd:
@
siteWidth;
}
.innehåll {
flyta:
vänster;
bredd:
@
siteWidth -
(@
sidofältbredd[e -postskyddad]
rännvidd);
}
.sidebar {
flyta:
vänster;
marginal-vänster:
@
rännvidd;
bredd:
@
sidofältbredd;
}
Nål
siteWidth =
1024px;
rännvidd =
20px;
sidofältbredd =
300px;
kropp {
marginal:
0
bil;
bredd:
siteWidth;
}
.innehåll {
flyta:
vänster;
bredd:
siteWidth -
(sidofältbredd+
rännvidd);
}
.sidebar {
flyta:
vänster;
marginal-vänster:
rännvidd;
bredd:
sidofältbredd;
}
Kompilerad CSS
kropp {
marginal:
0
bil;
bredd:
1024px;
}
.innehåll {
flyta:
vänster;
bredd:
704px;
}
.sidebar {
flyta:
vänster;
marginal-vänster:
20px;
bredd:
300px;
}
Några förprocessorknep
Det finns några knep som kan vara knepiga när du arbetar med CSS -förbehandlare. I den här artikeln kommer jag bara att täcka några av dem. Men om du är intresserad av detta ämne rekommenderar jag att du läser den officiella dokumentationen noggrant eller, ännu bättre, bara börja använda förbehandlaren varje dag under kodningsprocessen.
Felmeddelande
Om du har skrivit CSS -kod länge har du förmodligen stött på en situation där ett fel har smugit in i koden som du inte kan hitta. Om du befinner dig i exakt samma situation kan jag glädja dig - det finns ett sätt att lösa detta problem.
CSS -förbehandlare kan rapportera buggar i din kod och få dem att bete sig så enkelt. I det här fallet berättar förprocessorn själv var felet finns i CSS -koden ( och alla är nöjda).
Om du är intresserad av en liknande funktion i alla tre förbehandlare, beskriver den här artikeln i detalj hur du utför den här inställningen.
26.07.2017
5 bästa CSS -förbehandlare 2017 för att påskynda ditt arbetsflöde.
CSS -förbehandlare är utformade specifikt för att göra CSS -programmerarnas arbete roligare. De låter dig skriva lätt redigerbar, tillförlitlig och återanvändbar kod.
Med andra ord är en CSS-förbehandlare ett tillägg till CSS med nya funktioner: variabler, tillägg, import och så vidare.
I den artikeln delar jag de fem bästa CSS -förbehandlarna 2017.
01. Sass
SASS är den mest populära förbehandlaren med ett stort community och kraftfulla funktioner. Det fungerar bara tillsammans med Ruby och är mycket lätt att lära sig. De flesta front-end-ramverk som Bootstrap, Foundation och materialize är byggda med SASS.
SASS har två syntaxer:
- .sass
- .scss
02. Stylus
Stylus är en annan stor förbehandlare för dynamiskt generering av CSS. Om du vill utelämna lockiga hängslen, kommatecken och semikolon kan det vara det bästa valet för dig. Stylus drivs av Node.js och är mycket enkel att installera och använda. Den har många anpassade funktioner som mättnad (). Du kan också använda alla funktioner från andra ledande kompilatorer.
03. Mindre
Less, även känd som Less.js eller Less CSS, är en annan ledande CSS -förbehandlare. Det är ett bra val om du behöver standardfunktioner som variabler, kapslade stilar och så vidare. Detta Javascript -bibliotek skrevs ursprungligen i Ruby.
- Läs också:
04. Stylecow
Stylecow är en förbehandlare skriven i Node som kan installeras med npm. Den har ett kraftfullt API som du enkelt kan skapa plugins med.
05. CSS-Crush
En PHP -byggd förbehandlare som skulle vara ett bra alternativ för PHP -programmerare eftersom den fungerar på många plattformar. CSS-Crush har alla vanliga förbehandlingsfunktioner (variabler, kapslade stilar, etc.)
Slutsats
Om du letar efter den bästa CSS -förbehandlaren finns det massor av olika alternativ på webben. Enligt min mening är de bästa alternativen för nybörjare SASS och Stylus.
Om en klass eller identifierare används i
Fantastiskt .grymt. Lektion # komma igång. Lektion
Kompilerad HTML
Booleanska attribut
Booleanska attribut behandlas på samma sätt som om de vore i Ruby eller HTML, beroende på vilken syntax som används.
% input (: type => "checkbox" ,: Checked => true)% input (type = "checkbox" Checked = true)% input (type = "checkbox" Checked)
Kompilerad HTML
Undvikande text
En av fördelarna med Haml är möjligheten att beräkna och köra Ruby, men detta är inte alltid den önskade åtgärden. Text och kodrader kan undvikas med ett snedstreck (\), vilket gör att texten kan visas uttryckligen utan körning.
I exemplet nedan utförs det första = @author -exemplet av Ruby och får författarens namn från programmet. Det andra mönstret börjar med att ett snedstreck slipper texten och skrivs ut utan att det utförs.
Författare = @författare \ = @författare
Kompilerad HTML
Alternativ till att komma undan text
Ibland räcker det inte med att undkomma text och Ruby behövs för att generera önskad utmatning. Ett populärt exempel på detta är att försöka inkludera en period omedelbart efter en länk, men inte som en del av länktexten. Att placera en prick på en ny rad är inte acceptabelt eftersom det kommer att behandlas som ett tomt klassvärde, vilket orsakar ett kompileringsfel. Om du lägger till ett snedstreck framför punkt undgår karaktären, men lägger ett mellanslag mellan det sista ordet och punkten. Återigen, inte ger önskat resultat.
I dessa fall kommer Ruby -hjälpen till nytta. I exemplet nedan används hjälpen för att placera en punkt direkt efter det sista ordet, men utanför länktexten.
% p Shay - = lyckas "." gör% a (: href => "#") bra gjort
Kompilerad HTML
Shay - bra gjort.
Kommentarer (1)
Liksom element och attribut hanteras kommentarer något annorlunda i Haml. Koden kan kommenteras helt enkelt med ett enda snedstreck (/). Enskilda rader kan kommenteras med ett snedstreck i början av en rad, och kodblock kan kommenteras genom att vara kapslade nedanför snedstrecket.
% div / Kommentarrad Faktisk rad /% div Kommenterat block
Kompilerad HTML
Villkorade kommentarer
Villkorade kommentarer hanteras också annorlunda i Haml. Om du vill skapa en villkorlig kommentar använder du hakparenteser () runt villkoret. Dessa hakparenteser måste placeras omedelbart efter snedstrecket.
/% script (: src => "html5shiv.js")
Kompilerad HTML
Tyst kommentarer
Haml ger också möjlighet att skapa anpassade tysta kommentarer. Tyst kommentarer skiljer sig från grundläggande HTML -kommentarer genom att allt innehåll i en tyst kommentar efter sammanställningen tas bort helt från den sidan och visas inte i resultaten. Lugna kommentarer börjar med en bindestreck, följt av ett hashmarkering (- #). Som med andra kommentarer kan tysta kommentarer användas för att radera en eller flera rader genom häckning.
% div - # Raderad rad Faktisk rad
Kompilerad HTML
Filter
Haml erbjuder flera filter för att möjliggöra olika typer av input inom Haml. Filter börjar med ett kolon följt av namnet på filtret, till exempel: markdown, med allt innehåll för att filtrera bilagan nedanför.
Vanliga filter
Nedan finns några vanliga filter, inklusive den mest populära gruppen: css och: javascript.
- : cdata
- : kaffe
- : rymde
- : javascript
- : mindre
- : markdown
- : maruku
- : enkel
- : bevara
- : rubin
- : sass
- : scss
- : textil
Javascript -filter
: javascript $ ("knapp"). på ("klick", funktion (händelse) ($ ("p"). göm ("långsam");));
Kompilerad HTML
CSS- och Sass -filter
: css. behållare (marginal: 0 auto; bredd: 960px;): sass. behållare marginal: 0 automatisk bredd: 960px
Kompilerad HTML
Rubininterpolering
Som nämnts tidigare kan Haml utvärdera Ruby, och ibland kan det finnas fall där Ruby måste utvärdera inom vanlig text. I detta fall måste Ruby interpoleras genom att packa in den obligatoriska Ruby -koden.
Nedan följer ett Ruby -exempel som interpolerar som en del av ett klassnamn.
% div (: class => "student - # (@ student.name)")
Kompilerad HTML
SCSS och Sass
SCSS och Sass är förbehandlingsspråk som kompileras till CSS. De är lite som Haml och gör kodning enklare genom att erbjuda väldigt lite hävstångseffekt. Separat har SCSS och Sass samma ursprung, men tekniskt sett har de olika syntax.
För korthetens skull var Haml och Sass de enda förbehandlare som omfattas av denna handledning. De valdes också eftersom de är byggda med Ruby och passar direkt i Ruby on Rails -applikationer. De fick också enormt samhällsstöd.
När det gäller att välja vilken förbehandlare som ska användas är det viktigt att överväga vilken som är bäst för ditt team och projekt. Projekt inbyggda i Node.js kan förmodligen ha större nytta av Jade och Stylus. Den viktigaste aspekten att tänka på är dock vad ditt team är van vid att använda. Gör din forskning för varje projekt och välj det mest informerade beslutet.
Resurser och länkar
- Haml - HTML Abstraction Markup Language
- Sass - Syntaktiskt fantastiska stilark
- Sass Playground på SassMeister
Och när kommer dessa utvecklare äntligen att lugna ner sig och sluta mobba nybörjare!? Jag hann inte räkna ut det med CSS, och de säger till mig: "Alla riktiga layoutdesigners har redan bytt till förbehandlare under lång tid. Tja, vad en ren CSS på kvällen 2020!? "Vad ska jag göra?
För det första slutar utvecklare aldrig komma med ny teknik. Och professionella layoutdesigners är dem mycket tacksamma för det. Stilarkets språk CSS, uppfanns vid en tidpunkt då platser var primitiva. Men åren gick, sajterna blev mer komplexa och massiva, men layoutmetoderna förblev desamma. Layoutdesignerna tröttnade på att skriva liknande kodavsnitt. Det var omöjligt att snabbt ändra färgen på webbplatsen. Det fanns ett behov av mer automatisering av layout, och så var det CSS -förbehandlare koda. Och idag ska vi prata om en av dem, MINDRE förbehandlare.
Kompilerar LESS- och VS -kod
Allt du behöver sammanställa MINDRE kod är en kodredigerare VS -kod och expansion Lätt Mindre... Hur det fungerar?
- Skapa en stilfil med tillägget .mindre
- Efter sparandet genereras det automatiskt .css filen till samma mapp.
Varje gång du sparar ändringar, MINDRE filer sammanställs till CSS filer. Webbläsare har inte lärt sig förstå ännu MINDRE, de behöver CSS koda.
MINDRE variabler
Vi flyttar de mest använda egenskaperna till variabler. Webbplatsen använder vanligtvis upprepade färger och teckensnittsfamiljer. Vi lägger alla färger i variabler och sedan ersätter vi inte regelkoden utan variabeln i regeln. Du frågar: "Vad är fångsten? Jag behöver fortfarande förskriva något, vad är skillnaden?"
Huvudfunktionen är en snabb färgbyte. Färgen ändras bara en gång, i en variabel. Att byta ut färgen i en variabel kommer att ersätta färgen på alla sidor på webbplatsen. Bara detta chip är tillräckligt för att börja använda MINDRE... Vi förklarar variabler i MINDRE och spara de värden vi behöver i dem, vi ger namnen på variablerna meningsfulla.
@primary: # 194eb4;
@sekundär: # f2b834;
@framgång: # 4cb514;
@svart: # 000;
@white: #fff;
Nu skriver vi den vanliga koden, som vi gjorde i CSS, men istället för värden ersätter vi variabler.
MINDRE
div (vaddering: 0;
svart färg;
}
Efter att ha sparat, kompileras CSS koda. Vi rör inte alls CSS fil, allt arbete utförs i MINDRE fil. Du kan lagra alla ofta upprepade egenskaper i variabler.
CSS
div (vaddering: 0;
font-family: Roboto, sans-serif;
färg: # 000;
}
Mixins i MINDRE
Mixins användbart för att återanvända en uppsättning egenskaper - ramar, knappar, rubriker. En grupp av egenskaper som kan tillämpas på olika väljare.
Webbplatsen har flera knappar av samma typ av olika färger, men med samma typsnittsegenskaper. Låt oss skapa en mixin som hjälper till att automatisera processen med att skapa knappar.
Button_font (
text-transform: versaler;
teckenstorlek: 18px;
}
Lägg mixen till knappväljarens egenskaper.
Portfolio__button (
vaddering: 15px 80px;
färg: # 344258;
.knapp_font;
}
Vid utgången får vi:
Portfolio__button (
vaddering: 15px 80px;
färg: # 344258;
font-family: "DIN Pro Bold";
text-transform: versaler;
teckenstorlek: 18px;
}
Ampersand karaktär
Istället för att duplicera namnet på väljaren använder du ampersand -tecknet.
Portfolio__item (
position: relativ;
bakgrundsfärg: # 3c3c3c;
}
&: sväva (
bakgrundsfärg: #ccc;
}
}
CSS
.portfolio__item (position: relativ;
bakgrundsfärg: # 3c3c3c;
}
.portfolio__item: sväva (
bakgrundsfärg: #ccc;
}
MINDRE mediefrågor
Det är möjligt att spela in mediafrågor precis inuti väljaren.
MINDRE
.header__title (färg: # 344258;
typsnitt: 40px;
vaddering: 0 20px;
@media endast skärm och (maxbredd: 320px) (
typsnitt: 22px;
}
}
CSS
.header__title (färg: # 344258;
typsnitt: 40px;
font-family: "DIN Pro", sans-serif;
vaddering: 0 20px;
}
@media endast skärm och (maxbredd: 320px) (
.header__title (
typsnitt: 22px;
}
}
Slutsats
Denna artikel avslöjar inte ens 25% av alla möjligheter som den erbjuder MINDRE... Och detta är inte nödvändigt, syftet med artikeln är att motivera nybörjare att börja använda förbehandlare. Börjar med det enklaste, gradvis övergår till det mer komplexa.
NetTuts + artikel skriven av Johnathan Croom 2012.
Huvudmålet med denna artikel är att visa fördelarna med att använda någon av de tre förberedarna Sass, LESS och Stylus som beskrivs i den. Denna recension är perfekt för nybörjare som just upptäcker denna aspekt av webbdesign.
I den här artikeln kommer vi att titta på fördelarna och fördelarna med att använda tre olika förbehandlare - Sass, LESS och Stylus.
Introduktion
CSS-förbehandlare skapades med det enda syftet att lägga till kraft och flexibilitet i CSS-formatmallar utan att bryta webbläsarfunktioner. Alla förbehandlare sammanställer koden som genereras med sin syntax till standard CSS -kod som kan förstås och användas av alla webbläsare, oavsett hur gammal den är ( webbläsare) var inte.
Det finns många fördelar som förbehandlare ger CSS-formatmallar, och i den här artikeln kommer vi att täcka bara några av dem, både välkända och inte allmänt använda. Låt oss gå ner till översikten.
Syntax
Den viktigaste delen när du skriver kod i en CSS -förbehandlare är dess syntax. Lyckligtvis för oss är syntaxen för alla tre förbehandlare vi ska titta på CSS-liknande.
Sass & mindre
Både Sass och MINDRE förbehandlare har standard CSS -syntax. Detta gör uppgiften att konvertera befintlig CSS-kod till syntaxen för någon av dessa förbehandlare enkel och snabb. Sass använder tillägget för sina filer.
| 1 | .scss |
| 1 | .mindre |
En typisk fil i Sass- eller LESS -syntax visas nedan:
/ * style.scss eller style.less * / h1 (färg: # 0982c1;)Du kan tydligt se att detta är normal CSS -syntax som konverteras perfekt till Sass (SCSS) eller LESS.
Det är viktigt att notera att Sass (SCSS) också har en äldre version av Sass -syntax som utelämnar semikolon och lockiga hängslen.
Även om denna syntax fortfarande kan användas i praktiken, är den utfasad och vi kommer inte att använda den i våra exempel.
Sass -syntax ( gammal version) som följer:
/ * style.sass * / h1 färg: 0982c1Nål
För sina filer använder denna förbehandlare tillägget
| 1 | .styl |
Stylus syntax exempel:
/ * CSS-liknande syntax * / h1 (färg: # 0982C1;) / * lockiga hängslen utelämnade * / h1 färg: # 0982C1; / * utelämnade lockiga hängslen, kolon och semikolon * / h1 färg # 0982C1Alla syntaxer som visas ovan är giltiga och kommer att kompileras till rätt CSS. Till exempel kommer denna kod att kompileras till standard CSS utan fel:
h1 (färg # 0982c1) h2 teckensnittstorlek: 1 .2emVariabler
I förprocessorer deklareras och används variabler i CSS -stilfiler. Variabler kan ta vilket värde som helst som är tillåtet i CSS (färg, nummer eller text) och kan refereras var som helst i CSS -dokumentet.
Sass
I Sass -förbehandlaren deklareras en variabel med symbolen
| 1 | $ |
MINDRE
Variabler i LESS är exakt samma som i Sass, förutom att symbolen är placerad framför variabelnamnet
| 1 | @ |
Nål
Variabler i Stylus behöver inga tecken för sin deklaration, men kan fortfarande använda symbolen
, men när denna variabel anropas i koden, ersätts inte variabelvärdet.Med andra ord utförs inte följande operation:
mainColor = # 0982c1 siteWidth = 1024px $ borderStyle = prickad kroppsfärg mainColor border 1px $ borderStyle mainColor maxbredd siteWidthKompilerad CSS
Var och en av filerna som presenteras som ett exempel kompilerar till exakt samma CSS -kod. Du kan använda din fantasi för att föreställa dig hur användbara variabler kan vara.
Tack vare dem behöver du inte ange ett färgvärde och sedan upprepa det tjugo gånger i CSS -koden. Eller så är uppgiften inställd på att ändra bredden på webbplatsen och för detta är det nödvändigt att "söka" koden på jakt efter detta värde.
Nedan är CSS efter sammanställning:
kropp (färg: # 0982c1; kantlinje: 1px prickad # 0982c1; maxbredd: 1024px;)Häckande
Om din CSS -kod har till uppgift att samtidigt referera till flera element som har samma förälder, är det en tråkig uppgift att skriva den här föräldern om och om igen.
Till exempel så här:
I stället kan vi med hjälp av förprocessorn placera alla barnväljare inom parenteser på förälderelementet. Dessutom symbolen
| 1 | & |
Sass, LESS & Stylus
Alla tre förbehandlare har exakt samma syntax för kapslade väljare:
avsnitt (marginal: 10px; nav (höjd: 25px; a (färg: # 0982C1; &: sväva (text-dekoration: understruken;))))Kompilerad CSS
Nedan visas den sammanställda CSS -utdata från ovanstående kod. Jämför med koden som vi skrev i början - exakt samma sak. Men vilken bekvämlighet det är att dra nytta av förbehandlaren!
sektion (marginal: 10px;) sektionsnav (höjd: 25px;) sektion nav a (färg: # 0982C1;) sektion nav a: sväva (text-dekoration: understruken;)Mixins
| 1 | mixiner |
Blandning är särskilt användbart när du skapar specifika stilar för element eller vid prefix med webbläsarprefix. När ett mixin kallas inuti en CSS -väljare, känns argumenten för det mixinet igen, sedan tillämpas dess stilar på väljaren som kallade det.
Cirka. översättare: i exemplen nedan bör du vara uppmärksam på skillnaden i syntaxen för att deklarera och ringa mixin inuti CSS -väljaren för alla tre förbehandlare.
Sass
/ * Sass mixin kallas fel med $ borderWidth -argument, som standard är 2px * /@mixin-fel ($ borderWidth: 2px) (border: $ borderWidth solid # F00; color: # F00;) .generic-error (padding: 20px; margin: 4px; @include error ();) .login-error (vänster : 12px; position: absolut; top: 20px; @include error (5px);)MINDRE
/ * MINDRE mixin kallas fel med $ borderWidth -argument, som standard är 2px * /.error (@borderWidth: 2px) (border: @ borderWidth solid # F00; color: # F00;) .generic-error (padding: 20px; margin: 4px; .error (); / * Anslut ett mixin med namnet fel * /) .login-fel (vänster: 12px; position: absolut; topp: 20px; .error (5px); / * Anslut en mixin som kallas fel med ett $ borderWidth -argument på 5px; det vill säga argumentets värde åsidosätts * / }Stil
/ * Stylus mixin kallas fel med $ borderWidth -argument som standard är 2px * / error (borderWidth = 2px) (border: borderWidth solid # F00; color: # F00;) .generic-error (padding: 20px; margin: 4px; error (); / * Anslut ett mixin med namnet fel * /) .login-fel (vänster: 12px; position: absolut; topp: 20px; fel (5px); / * Anslut en mixin som kallas fel med ett $ borderWidth -argument på 5px; det vill säga argumentets värde åsidosätts * / }Kompilerad CSS
Sammanställning av alla tre förbehandlare resulterar i samma CSS -kod:
.generic-error (padding: 20px; margin: 4px; border: 2px solid # f00; color: # f00;). login-error (left: 12px; position: absolute; top: 20px; border: 5px solid # f00; färg: # f00;)Arv
När vi skriver CSS -stilar på ett "klassiskt" sätt, för att kunna tillämpa samma egenskaper på flera element i ett HTML -dokument, måste vi skapa kod så här:
p, ul, ol ( / * några stilar här * / }Allt fungerar utmärkt. Men om du behöver skriva stilar separat för någon av dessa väljare måste du skapa separata regler för var och en av dem. Och genast blir stilarkskoden rörig och svår att underhålla.
Däremot gäller arv. Arv är förmågan för vissa CSS -väljare att ärva egenskaper från en annan väljare.
Cirka. översättare: notera samma syntax för att ansluta (deklarera) arv i en CSS -väljare med hjälp av direktivet
.
1 @förlänga
Sass & Stylus
.block (marginal: 10px 5px; stoppning: 2px;) p (@extend .block; border: 1px solid #EEE;) ul, ol (@extend .block; / * Ärva egenskaper från klassväljaren. Block * /Kompilerad CSS
.block, p, ul, ol (marginal: 10px 5px; vaddering: 2px;) p (kant: 1px solid #EEE;) ul, ol (färg: # 333; text-transform: versaler;)MINDRE
MINDRE förbehandlaren stöder inte helt arv som Sass eller Stylus gör. Istället för att lägga till flera väljare till en enda fastighetsuppsättning behandlas arv som en blandning utan argument.
Stilar importeras för varje väljare. Nackdelen med detta tillvägagångssätt är den ständiga upprepningen av fastighetssträngar i den sammanställda CSS -stilen.
Så här kan MINDRE kod med arv se ut:
.block (marginal: 10px 5px; vaddering: 2px;) p (.block; kant: 1px solid #EEE;) ul, ol (.block; / * Arv av fastigheter från klassväljaren. Block * / färg: # 333; text-transform: versaler; )Kompilerad CSS
.block (marginal: 10px 5px; vaddering: 2px;) p (marginal: 10px 5px; vaddering: 2px; kant: 1px solid #EEE;) ul, ol (marginal: 10px 5px; vaddering: 2px; färg: # 333; text-transform: versaler;)Som du tydligt kan se från koden, klassstilar
.Importera
I CSS -gemenskapen för att importera stilar med hjälp av direktivet
| 1 | @importera |
I någon av de tre förbehandlarna infogar en fil i en annan effektivt koden från en fil till en annan när den kompileras, vilket resulterar i en enda CSS -fil.
Cirka. översättare: med andra ord, i förbehandlare är import nödvändig för att sammanställa en fil från flera. I standard CSS resulterar import i att en kod ersätts i en annan.
Observera att när du sammanställer en fil med en standardanslutning med hjälp av direktivet
| 1 | @import "file.css" |
Kompilerad CSS
@import "reset.css"; body (bakgrund: #EEE;) p (bakgrund: # 0982C1;)Färgfunktioner
"Färg" -funktioner är utformade för att omvandla färg när de kompileras. Dessa funktioner är extremt användbara när du skapar lutningar, mörkare färger när
| 1 | sväva |
Sass
ljusare ($ färg, 10%); mörkare ($ färg, 10%); mättad ($ färg, 10%); desaturat ($ färg, 10%); gråskala ($ färg); / * returnerar gråskala för $ färg * / komplement ($ color); / * returnerar komplementfärg på $ color * / invertera ($ color); / * returnerar den omvända färgen på $ color * / mix ($ color1, $ color2, 50%);Ovanstående kod är bara en kort lista över färgfunktioner i Sass. En fullständig lista över alla tillgängliga funktioner finns i Sass -dokumentationen.
"Färg" -funktionerna kan användas var du än behöver för att arbeta med färger i koden. Ett enkelt exempel - en variabel med en färg deklareras, till vilken färgtonfunktionen tillämpas ytterligare i koden
| 1 | mörkna |
MINDRE
ljusare (@color, 10%); / * returnerar en färg 10% ljusare än $ färg * / mörkna (@color, 10%); / * returnerar en färg som är 10% mörkare än $ färg * / mättad (@färg, 10%); / * returnerar en färg som är 10% mer mättad än $ color * / / * returnerar en färg 10% mindre mättad än $ color * / spin (@color, 10); / * returnerar färgförskjutningen 10 grader till höger i förhållande till @color * / spin (@color, -10); / * returnerar färgförskjutningen 10 grader till vänster från @färgen * / mix ( @ color1, @ color2); / * returnerar resultatet av att blanda färgen $ color1 med färgen $ color2 * /Listan över MINDRE förbehandlingsfunktioner finns på den officiella webbplatsen för LESS Documentation -projektet.
Nedan är ett exempel på hur "färg" -funktionerna kan tillämpas i MINDRE:
@färg: # 0982C1; h1 (bakgrund: @ färg; kantlinje: 3px fast mörkare ( @ färg, 50%);)Nål
ljusare (@color, 10%); / * returnerar en färg 10% ljusare än $ färg * / mörkna (@color, 10%); / * returnerar en färg som är 10% mörkare än $ färg * / mättad (@färg, 10%); / * returnerar en färg som är 10% mer mättad än $ color * / desaturera (@color, 10%); / * returnerar en färg 10% mindre mättad än $ color * /För en fullständig lista över alla Stylus -förbehandlarens färgfunktioner, se projektets webbplats för Stylus Documentation.
Och ett exempel på att använda “färg” -funktionen i Stylus:
färg = # 0982C1 h1 bakgrundsfärgskant 3px fast mörkare (färg, 50%)Aritmetiska operationer
Tack vare förbehandlare är det nu enkelt och enkelt att utföra räkneoperationer inom CSS -kod. Denna funktion är ofta användbar.
Cirka. översättare: det är värt att nämna CSS3 -funktionen vid namn
, som också låter dig utföra enkla aritmetiska operationer inuti CSS -kod.
1 calc ()
Sass, LESS & Stylus
kropp (marginal: (14px / 2); topp: 50px + 100px; höger: 100px - 50px; vänster: 10 * 10;)Praktiska exempel
Så vi undersökte huvudpunkterna i vad och hur alla tre förbehandlare kan göra. Vi har dock aldrig berört det ögonblick då dessa möjligheter praktiskt tillämpas. Nedan finns en lista över riktiga webbapplikationer som använder förbehandlare samtidigt som de förbättrar hela koden avsevärt.
Webbläsarprefix
Ett av de mest slående exemplen på fördelen med att använda förbehandlare är att skriva egenskaper med webbläsarprefix som använder dem. När vi väl har skapat en mixin med stöd för webbläsarprefix, räddar vi oss från rutinarbete.
Till exempel, låt oss skapa för alla tre förbehandlare mixins för att runda hörnen av ett block:
Sass
@mixin border-radius ($ -värden) (-webkit-border-radius: $ -värden; -moz-border-radius: $ -värden; gräns-radie: $ -värden;) div (@include border-radius (10px);)MINDRE
.border-radius (@values) (-webkit-border-radius: @ values; -moz-border-radius: @ values; border-radius: @ values;) div (.border-radius (10px);)Nål
border-radius (värden) (-webkit-border-radius: värden; -moz-border-radius: värden; gräns-radie: värden;) div (border-radius (10px);)Kompilerad CSS
div (-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;)3D -text
Skapa en 3D -effekt för text med en CSS -egenskap
| 1 | text-skugga |
Med mixins och färgfunktioner kan vi skapa volymetrisk text och ändra dess färg i farten:
Sass
@mixin text3d ($ color) (färg: $ color; textskugga: 1px 1px 0px mörkare ($ Färg, 5% ), 2px 2px 0px mörkna($ Färg, 10% ), 3px 3px 0px mörkna($ Färg, 15% ), 4px 4px 0px mörkna($ Färg, 20% ), 4px 4px 2px #000 ; } h1 { textstorlek: 32pt; @omfatta text3d (# 0982c1); }MINDRE
.text3d(@Färg) { Färg: @ Färg; text-skugga: 1px 1px 0px mörkna(@ Färg, 5% ), 2px 2px 0px mörkna(@ Färg, 10% ), 3px 3px 0px mörkna(@ Färg, 15% ), 4px 4px 0px mörkna(@ Färg, 20% ), 4px 4px 2px #000 ; } spänna { textstorlek: 32pt; .text3d (# 0982c1); }Nål
text3d(Färg) Färg: Färg text-skugga: 1px 1px 0px mörkna(Färg, 5 %), 2px 2px 0px mörkna(Färg, 10 %), 3px 3px 0px mörkna(Färg, 15 %), 4px 4px 0px mörkna(Färg, 20 %), 4px 4px 2px #000 spänna textstorlek: 32pt text3d(# 0982c1)I exemplet för Stylus valde jag alternativet att skriva egendomen
| 1 | text-skugga |
Kompilerad CSS
spänna { textstorlek: 32pt; Färg: # 0982c1; text-skugga: 1px 1px 0px # 097bb7, 2px 2px 0px # 0875ae, 3px 3px 0px # 086fa4, 4px 4px 0px # 07689a, 4px 4px 2px #000 ; }Högtalare
Jag tänkte på att använda variabler och numeriska värden för dessa variabler när jag precis började bekanta mig med CSS -förbehandlarnas möjligheter. Att deklarera en bredd för en layout i en variabel gör att uppgiften att ändra den bredden ( om nödvändigt) enkelt och snabbt:
Sass
$ siteWidth: 1024px; $ rännvidd: 20px; $ sidofältbredd: 300px; kropp { marginal: 0 bil; bredd: $ siteWidth; } .innehåll { flyta: vänster; bredd: $ siteWidth - ($ sidofältbredd+$ rännvidd); } .sidebar { flyta: vänster; marginal-vänster: $ rännvidd; bredd: $ sidofältbredd; }MINDRE
@siteWidth: 1024px; @gutterWidth: 20px; @sidebarWidth: 300px; kropp { marginal: 0 bil; bredd: @ siteWidth; } .innehåll { flyta: vänster; bredd: @ siteWidth - (@ sidofältbredd[e -postskyddad] rännvidd); } .sidebar { flyta: vänster; marginal-vänster: @ rännvidd; bredd: @ sidofältbredd; }Nål
siteWidth = 1024px; rännvidd = 20px; sidofältbredd = 300px; kropp { marginal: 0 bil; bredd: siteWidth; } .innehåll { flyta: vänster; bredd: siteWidth - (sidofältbredd+ rännvidd); } .sidebar { flyta: vänster; marginal-vänster: rännvidd; bredd: sidofältbredd; }Kompilerad CSS
kropp { marginal: 0 bil; bredd: 1024px; } .innehåll { flyta: vänster; bredd: 704px; } .sidebar { flyta: vänster; marginal-vänster: 20px; bredd: 300px; }Några förprocessorknep
Det finns några knep som kan vara knepiga när du arbetar med CSS -förbehandlare. I den här artikeln kommer jag bara att täcka några av dem. Men om du är intresserad av detta ämne rekommenderar jag att du läser den officiella dokumentationen noggrant eller, ännu bättre, bara börja använda förbehandlaren varje dag under kodningsprocessen.
Felmeddelande
Om du har skrivit CSS -kod länge har du förmodligen stött på en situation där ett fel har smugit in i koden som du inte kan hitta. Om du befinner dig i exakt samma situation kan jag glädja dig - det finns ett sätt att lösa detta problem.
CSS -förbehandlare kan rapportera buggar i din kod och få dem att bete sig så enkelt. I det här fallet berättar förprocessorn själv var felet finns i CSS -koden ( och alla är nöjda).
Om du är intresserad av en liknande funktion i alla tre förbehandlare, beskriver den här artikeln i detalj hur du utför den här inställningen.
26.07.2017
5 bästa CSS -förbehandlare 2017 för att påskynda ditt arbetsflöde.
CSS -förbehandlare är utformade specifikt för att göra CSS -programmerarnas arbete roligare. De låter dig skriva lätt redigerbar, tillförlitlig och återanvändbar kod.
Med andra ord är en CSS-förbehandlare ett tillägg till CSS med nya funktioner: variabler, tillägg, import och så vidare.
I den artikeln delar jag de fem bästa CSS -förbehandlarna 2017.
01. Sass
SASS är den mest populära förbehandlaren med ett stort community och kraftfulla funktioner. Det fungerar bara tillsammans med Ruby och är mycket lätt att lära sig. De flesta front-end-ramverk som Bootstrap, Foundation och materialize är byggda med SASS.
SASS har två syntaxer:
- .sass
- .scss
02. Stylus
Stylus är en annan stor förbehandlare för dynamiskt generering av CSS. Om du vill utelämna lockiga hängslen, kommatecken och semikolon kan det vara det bästa valet för dig. Stylus drivs av Node.js och är mycket enkel att installera och använda. Den har många anpassade funktioner som mättnad (). Du kan också använda alla funktioner från andra ledande kompilatorer.
03. Mindre
Less, även känd som Less.js eller Less CSS, är en annan ledande CSS -förbehandlare. Det är ett bra val om du behöver standardfunktioner som variabler, kapslade stilar och så vidare. Detta Javascript -bibliotek skrevs ursprungligen i Ruby.
- Läs också:
04. Stylecow
Stylecow är en förbehandlare skriven i Node som kan installeras med npm. Den har ett kraftfullt API som du enkelt kan skapa plugins med.
05. CSS-Crush
En PHP -byggd förbehandlare som skulle vara ett bra alternativ för PHP -programmerare eftersom den fungerar på många plattformar. CSS-Crush har alla vanliga förbehandlingsfunktioner (variabler, kapslade stilar, etc.)
Slutsats
Om du letar efter den bästa CSS -förbehandlaren finns det massor av olika alternativ på webben. Enligt min mening är de bästa alternativen för nybörjare SASS och Stylus.