Preprocessorer som Sass hjälper oss att flexera våra utvecklingsmuskler i nästan alla delar av vår CSS. Variabler, mixins, arv och många fler bra funktioner gör kodning enklare och mer koncis än någonsin.
Så vad händer med att använda Sass för responsiv design, eller mer specifikt för mediafrågor? Finns det några särdrag hos Sass som parar särskilt bra med mediafrågor? Finns det något du borde undvika? Följ med mig när jag experimenterar och upptäck svaren.
Hur fungerar Basic Sass-funktioner med mediefrågor?
Jag har gjort mycket experiment på sistone med Sass och mediasökningar för att se vad som fungerar och vad som inte gör det. Resultaten är ganska blandade: vissa saker fungerar och andra gör det inte. Sammantaget finns det verkligen inget imponerande nog att helt ändra hur du använder mediefrågor, men det är fortfarande värt att gå igenom några exempel som illustrerar hur de två arbetar tillsammans.
Variabler Inne i en Media Query: Ja
Vårt första test undersöker huruvida en variabel i Sass överför till en mediafrågans kropp. Frågan är ett av räckvidd: Kan jag ställa in en variabel utanför en mediefråga och sedan använda den inom en mediasökning?
Det visar sig att detta fungerar bra. Vår generiska fontsize-variabel ställer in stilsortsstorleken till 10px inuti mediefrågan.
Variabler som brytpunkter: Nej
Min nästa fråga var huruvida jag kunde använda variabler för att ställa in mina brytpunkter. Jag är inte säker på att det här någonsin skulle vara en bra idé, men mer grundläggande än den frågan var huruvida det är ens möjligt. Vad händer när jag försöker göra det här?
Detta är uppenbarligen inte en giltig användning av Sass-variabler eftersom den här koden ger ett fel och kommer inte att kompilera. Jag försökte samma sak i LESS och fick lika värdelösa resultat. Den här gången sammanställdes det utan att kasta ett fel men värdet överfördes inte korrekt.
Utökade insidan av en mediasökning: Sortera av?
Utökade arbeten med mediafrågor, men det är viktigt att veta på vilket sätt det fungerar eftersom resultaten kanske inte är vad du tycker.
Vårt första exempel använder @extend som det är tänkt att användas. Här berättade jag errorTwo-klassen att ärva i stilen i errorOne-klassen och ställa in färgen till blå.
Förutsägbart producerar detta exakt det resultat vi vill ha. @Extend bryr sig inte om att det är inuti en mediasökning, det fungerar på samma sätt som det gör någon annanstans.
Så vad händer när vi fitta med den här strukturen lite och placera en del av vår kod utanför mediafrågan? Här har jag ställt in stilar för errorOne och errorTwo utanför mediafrågan och försökte sedan använda några tvivelaktiga arvspraxis genom att återställa errorTwo-formaten inuti mediefrågan via en förlängning av errorOne.
Här är den sammanställda CSS-filen från den här koden. Förhoppningen var att errorOne-formaten utanför mediesökningen skulle tillämpas på errorTwo inuti mediefrågan, men i stället @extend fungerade som det var utformat för att: det kombinerade selektorerna på den ursprungliga platsen och tillämpade de delade formaten.
Det är viktigt att notera att koden ovan är väldigt annorlunda än den avsedda CSS, som visas nedan. Här är ErrorOne och ErrorTwo individuellt definierade med olika stilar, och sedan när mediafrågan träder i kraft, är ErrorTwo inställd för att matcha ErrorOne med tillägg av en färgförändring.
Mixins Inne i en Media Query: Ja
Precis som med variabler kan vi förklara en mixin utanför en mediefråga och tillämpa den inuti en mediefråga. Till exempel, här ställde jag upp en font mixin med några textstilar och kallade den sedan inuti en mediefråga.
Rulla en mediefråga till en mixin: Nej
Härifrån kan du undra om du faktiskt kan bara rulla en hel mediefråga till en mixin och sedan skicka in några argument när du vill implementera det. Såvitt jag kan säga, det finns inget sätt att göra detta i Sass, LESS eller Stylus.
Nätmedelsfrågor
Hittills har vi inte stött på några stora överraskningar. För det mesta fungerar allt som du kan förvänta dig med det möjliga undantaget av brytpunkter som inte accepterar variabler. Vårt nästa utforskningsämne är en funktion som är inbyggd i Sass som skapades speciellt för mediafrågor: nesting.
Sass låter dig boa alla typer av kod. Det är absolut inte ett krav när du kodar med Sass men funktionen är där om du vill ha det. Låt oss säga att vi ville ha ett mer kortfattat sätt att skriva följande CSS:
Med Sass kan vi rädda oss själva med att skapa ett separat deklarationsblock och bara näsa svävarstilarna inuti knappklassen.
Samma logik kan användas för att använda mediafrågor till specifika objekt. I stället för att skapa en dedikerad sektion som innehåller alla dina mediefrågor kan du bygga dem alla och därmed para dem med de stilar som de ändrar. Här är ett exempel:
Fördelar och nackdelar med nästande mediafrågor
Tanken bakom massmediafrågor är en anständig, åtminstone på ytan. Som jag nämnde ovan stämmer det mediasökningar med de ursprungliga stilar som de ändrar, vilket är ett anständigt organisationsschema. Det skär också ned på den nödvändiga upprepningen av selektorerna, vilket är en bra sak.
Tyvärr tror jag att dessa fördelar uppvägs av det faktum att det här skapar en del rörig kod. Denna fråga presenterar tydligt sig själv när din kod blir mer komplex. Här har vi två olika element, som alla utnyttjar den kapslade mediesökfunktionen.
Sass ovan kommer att kompilera till CSS nedan. Som du kan se, skrivs varje mediefråga individuellt och visas direkt efter de stilar som den är associerad med.
Om du har arbetat med lyhörd design har du förmodligen omedelbart problem med hur denna kod sammanställs. För att se vad jag menar, låt oss se hur jag skulle koda ut det här för hand i ren CSS om jag gjorde det manuellt.
Ring mig galen, men jag tycker att detta är överlägset det som Sass spottar ut. Jag har ett verkligt problem med att identiska frågeformulär inte kombineras. Vi ser här att det inte fanns någon anledning att skriva ut 300pxfrågan två gånger när vi bara kunde skriva ut det en gång och kasta båda deklarationsblocken inuti.
Dessutom är organisationen här renare och lättare att följa. Typiskt, när du arbetar med mediafrågor är du in för en hel del tweaking. Med Sass-sättet är du tvungen att jaga igenom din kod och hitta varje bit som behöver bytas. Om din SCSS-fil innehåller hundratals kodlinjer kan det vara brutalt. Med vanilj CSS kan vi placera alla våra mediafrågor på ett ställe och tweak dem tillsammans som en enhet.
Kontrolldirektiv
Trots att jag inte är särskilt glad över något av de resultat som jag fick från att blanda Sass med mediefrågor, är ett område som jag tror meriterar en undersökning, kontrolldirektiv. Detta är ett noggrannt ämne eftersom, om du inte är programmerare, verkar kontrolldirektiv alltför komplicerat för CSS. Kom bara ihåg innan du lämnar mig en otäck kommentar att jag bara spelar med några möjligheter här.
Med tanke på beskaffenheten av mediefrågor tror jag att kontrolldirektiv kan innehålla en del intressanta funktionaliteter. En mediafråga är trots allt mycket som ett if-uttalande: om viewport = x, gör y. Med hjälp av några snygga Sass kan vi ta det här mycket längre. Se om du kan ta reda på vad som händer här.
I grund och botten ställer jag upp ett objekt med en bredd som minskar bredden med 100px för varje mediefråga. Sedan ställer jag in en mixin som ändrar elementets färg om dess bredd blir under en viss punkt.
Den här tekniken kan vara användbar för många olika saker, t.ex. att ändra ett teckensnitt till något som standard när storleken blir för liten. Här är en något modifierad version som tittar tills objektet är mindre än 400px bred och ställer sedan in höjden till hälften av bredden.
Så här sammanställer detta. Som du kan se ändrades inte höjden på den första mediefrågan eftersom bredden inte är mindre än 400px. På den andra mediefrågan om bredden är 300px så ändras höjden till 150px. Det trevliga med detta är att den sammanställda koden är kortfattad och inte har någon av de galna logikerna ovanifrån.
Slutsats
Jag skulle verkligen älskat att ha presenterat en diskussion om hur Sass är en spelväxlare när det gäller mediafrågor, men vid denna tidpunkt tror jag motsatsen är sant. Det är nog bäst att klara av allt annat än de mest grundläggande Sass-funktionerna i genomförandet av mediasökningar. Använd gärna variabler och mixins som alltid (acceptera i breakpoint-deklarationen), men se upp för arv som fungerar annorlunda än du förväntar dig och tänka två gånger innan du hämtar en mediefråga, eftersom du på sikt skapar mer arbete för dig själv .
Ett undantag som jag kan tänka på är kontrolldirektiv, som är ganska avancerade och håller några fascinerande möjligheter i kombination med mediafrågor.
Har du försökt implementera Sass i samband med mediafrågor? Uppdagade du några coola knep eller bestämde du dig för att undvika övningen helt och hållet? Låt oss veta i kommentarerna.