CSS-ramverk är kända för att ta en klubb till idén om semantisk HTML. Det här är ett sådant problem att utvecklare överallt helt svärit idén om rutnätbaserade ramar uteslutande på principen att det leder till icke-semantiska klassnamn.
Med Sass blir det ganska lätt att arbeta runt detta problem och använda ett fördefinierat rutnät utan att tillgripa wonky klassnamn. Faktum är att den senaste versionen av Sass (3.2) har en ny funktion som gör den här uppgiften enklare än någonsin. Läs vidare för att se vad det är och hur det fungerar.
Problemet
Personligen älskar jag att konfigurera och använda grids i CSS. Jag är en nerdig, analytisk typ av kille så layout och allt om dess komplexa (irritationer) är bokstavligen min favorit sak om CSS.
Visserligen ser jag helt klart din punkt om du har svärit av nät. Här är ett exempel på problemet, som illustreras av Twitter Bootstrap-rutan:
Idealt sett skulle dina klassnamn vara begränsade till något som berättar något om sidans flöde. Du kanske har en? Featured? avsnitt eller kanske en? copyright? klass. Dessa klassnamn berättar för vad de är för medan de inte är så specifika att de beskriver typen av hur elementet stylas. Med hjälp av denna metod kan designens estetik förändras fullständigt med en omkonstruktion, men klassnamnen kan vara desamma.
Med Bootstrap och andra grids är du tvungen att infoga alla dessa klassnamn som faktiskt kommunicerar och definierar din layout mycket specifikt direkt i din HTML. Semantiskt eller inte, jag tror att nät är super kul och ganska lätt att hämta, men i slutändan använder vi klasser på ett annat sätt än vad som verkligen är tänkt.
Semantiskt eller inte, jag tror att nät är super kul och ganska lätt att hämta, men i slutändan använder vi klasser på ett annat sätt än vad som verkligen är tänkt. ?Skulle det inte vara trevligt om vi kunde få det bästa av båda världarna? Gridramar är extremt lätta att genomföra, men semantisk kodning är förmodligen det bättre sättet att gå till branschen som helhet. Det är en klassisk kamp mellan individbehov vs. det större bra.
Sass @extend
När vi tar med Sass in i bilden, kan vi verkligen få vår kaka och äta den också. Anledningen till detta är Sasss hela punkt. Bakom kulisserna kommer du att bryta reglerna och göra alla slags galna saker eftersom slutprodukten kommer att bli vanilj CSS.
Sass-funktionen som verkligen sparar dagen här heter @extend, och det är händerna på den bästa Sass-funktionen (det är också en av de största orsakerna som många MINDRE användare ger in och byter till Sass). Sass @extend är en enkel funktion med stora konsekvenser.
För att uppskatta hur @extend fungerar, låt oss hoppa rätt till ett exempel som jag kodade för en tidigare handledning:
Här har vi två klasser som i huvudsak behöver dela de flesta av sina stilar. I grund och botten, svaret? klassen är precis som? kommentar? klass, endast med kursiv text och en annan bakgrundsfärg. För att dra av det, använder vi helt enkelt ett @extend uttalande inom vårt? Svar? klass, vilket pekar på vår kommentar? klass.
Detta berättar Sass att när CSS utmatas, alla stilar från? Kommentar? bör också tillämpas på? svar.? Den bästa delen här är att Sass är smart nog att utföra detta på ett sätt som eliminerar redundans:
Jag vet vad du tänker, varför kollar vi inte bara på det här sättet i första hand? Vi kunde absolut. För många är Sass-vägen dock lite mer linjär och lättare att sätta upp på flugan.
Utvidga rutnät klasser
Nu när vi vet vad @extend gör, låt oss se hur vi kan tillämpa det på vissa nät CSS. Låt oss ta en titt på någon nätkod som är löst baserad på Chris Coyiers överskuggningar.
Koden är vackert koncis och mycket enkel att implementera, men det kräver att vi tillämpar icke-semantiska klassnamn i vår CSS (.col-1-2, etc.). Om vi tänker på dessa idéer med @extend kan vi komma på något som följande:
Trubbel i paradiset
Som du kan se i exemplet ovan är @extend inte riktigt hjälten som vi vill att den ska vara i den här situationen. Vår Sass-version kan ge semantiska klassnamn till vår HTML, men vår sista CSS kommer att fyllas med uppblåsthet.
Koden som Sass spetsar ut, men mer koncis, är fortfarande fylld med våra olika oanvända klassnamn som? Kolumn? och? kol-1-3 ?. Vi ville verkligen ställa in dessa som mallar till @extend och behöver inte eller vill ha dem i vår sista CSS.
Placeholder Selectors i Sass 3.2
Det här är där Sass 3.2 kommer in. Det finns en ny funktion som heter? Placeholder selectors? som kommer att lösa vårt lilla problem snyggt. De goda människorna bakom Sass insåg att kodare ofta skapade en slags "basklass"? som bara existerade för en @xtendens skull och skapade platshållare som ett sätt att uppmuntra detta beteende utan den olyckliga bieffekten av en oanvänd klass i den slutliga CSS.
I exemplet nedan kan vi se hur det här fungerar. Den här gången lade jag in både Sass-ingången och CSS-utgången bredvid varandra så att du enkelt kan se transformationen. Läs kommentarerna för att se vilken är vilken.
Som du kan se, kunde vi definiera kol-2-3 genom att använda en procentig symbol i stället för en period. som en platshållare som kan förlängas men inte överföras till vår slutliga produktion.
Använda Placeholder Selectors i vårt nät
Låt oss genomföra dessa i större skala med all den kod som vi arbetade med tidigare. Så här kan det här se ut:
Som du kan se, nu mest av våra klasser är egentligen bara placeholder selectors som inte kommer att få produktionen till vår sista CSS. Detta gör det möjligt för oss att sätta upp väldigt enkelt och enkelt att genomföra klassnamn i vår Sass, samtidigt som vi klarar av semantisk utmatning! Slutligen, det bästa av båda världarna!
Dålig Form Sass
Inte så fort, varför visade jag inte produktionen från koden ovan? Eftersom det i teorin borde vara fantastisk. Om allt gick smidigt skulle utmatningen vara så här:
Tyvärr har Sass lite konstig när det gäller att använda flera sträcker sig. Här är den faktiska produktionen:
Om du är snäll, har du redan märkt de redundanta selektorerna på raderna fyra och elva. Eftersom de två sträcker sig faktiskt utöver två olika platshållare, behandlar Sass dem som separata objekt i utmatningen, även om de lätt kan kombineras.
Som du kan föreställa dig, om hela din webbplats byggdes på premissen av flera utökar och platshållare, så skulle redundanserna sannolikt vara rikliga i slutprodukten.
På grund av hur kaskad och arv fungerar, kan jag se att det här skulle vara ett väldigt knepigt problem att koda runt, så jag ska skära Sass killarna en paus. Ändå hoppas jag att det här är något som tas upp i framtiden.
Vad tror du?
Sass @extend har massor av löften för att drastiskt förbättra effektiviteten med CSS. Det är också ett väldigt användbart verktyg om du försöker skapa ett semantiskt rutsystem, speciellt i kombination med den nya platshållare-funktionen från Sass 3.2.
Tyvärr, som vi såg ovan, finns det även nackdelar med att använda den här tekniken. Tror du att proffsen är värda nackdelarna? Kan du tänka på ett bättre sätt att dra av det här? Jag vill se det, så lämna mig en kommentar.