Hoe de media-query's in Sass

Sep 14, 2025

Procedures

Vrijwel elke site is nu gebouwd met ten minste een knipoog naar responsieve webdesign. De manier waarop we deze responsieve stijlen structureren heeft een directe relatie met hoe complex het project zal zijn om in de toekomst te handhaven en te bewerken, omdat updates worden gemaakt en het project groeit in grootte.

Desondanks lijkt het alsof een algemeen geaccepteerde aanpak voor hoe en waar deze responsieve stijlen nog moet worden vastgesteld door ontwikkelaars. Hoewel nergens in de buurt van zo slecht als 'de oude dagen' van CSS, vóór preprocessors en naamgevingsmethoden, veroorzaakt dit een inconsistente en vaak rommelige benadering om de responsieve stijlen voor elementen te structureren.

Gewoon aan de slag met je site? Kies een top website bouwer en web hosting onderhoud. Werken met een groot team? Zorg ervoor dat je cloud opslag Houdt iedereen op de hoogte van uw ontwerpsysteem.

Wat is sass?

CSS in het verleden

Om het probleem te begrijpen, laten we naar het begin gaan. Een van de redenen waarom CSS-preprocessors zoals Sass of Minder werden gecreëerd in de eerste plaats, is omdat CSS extreem rommelig kan worden en beroemd is om te onderhouden. We vonden dat zelfs na een tijdje, zelfs kleine websites lijnen hadden op lijnen van CSS-stijlen die op zijn plaats waren gelaten, alleen omdat de ontwikkelaar niet zeker was of het vereist was of de overblijfselen van een verwijderd functie of verouderd element dat zou kunnen worden verwijderd.

Neem het volgende scenario als voorbeeld:

. Heading {background: # 000000;
.title {font-size: 16px;
.title_small {font-size: 14px;
.title_alt {font-familie: SANS-SERIF; }

Hoewel je misschien denkt dat het veilig is om aan te nemen dat het .title-element de titel is voor het. Hoofdelement in deze context, in feite kun je eigenlijk niet helemaal zeker weten dat het niet wordt gebruikt om elk ander titelelement op de site te worden gebruikt . Waar is .title_alt klasse gebruikt en is het nog steeds vereist of in gebruik? Je kunt zien hoe, zelfs met zo'n eenvoudig voorbeeld het een tijdrovende oefening kan worden om dit alles te controleren voordat je verandert.

Hierdoor zouden veel ontwikkelaars tijd besparen door een nieuwe klasse toe te voegen aan het element of het gebruik van een meer complexe CSS-selector om de wijzigingen te maken die ze hebben gewenst, die vervolgens op zijn beurt de complexiteit van de CSS voor de volgende keer dat een verandering nodig was, .

Preprocessors, het benoemen van conventies en modulaire CSS

Dankzij de mogelijkheid om stijlen te nestelen, gebruikt u variabelen, verlengt u andere klassen en meer, preprocessors een revolutie in de manier waarop we CSS creëren en onderhouden. Helaas oplossen ze het probleem van rommelige, verouderde stijlen die verspreiden en groeien in een project als het leeft als een infectie.

Mee kwam met het benoemen van conventies en CSS-methodologieën zoals Bem , dat wanneer toegepast, een veel groter context-context geven aan stijlen.

In combinatie met het maken van variaties, modificaties en de stijlen van geneste elementen die op zichzelf staan met behulp van CSS-modules , een heel sterke manier om je stijlen te structureren, werd geboren.

Hieronder kunt u zien hoe deze verbeteringen de problemen kunnen oplossen die we tegenkwamen met ons eerdere CODE-voorbeeld:

. Heading {
Achtergrond: $ zwart;


.heading__title {
FONT-GROOTTE: 16PX;

& amp;. Heading__Title - Klein {
FONT-GROOTTE: 14PX;



.POST__TITLE - ALT {
Font-familie: Sans-serif;
}

Het is onmiddellijk duidelijk dat de titelstijlen hier specifiek zijn opgenomen in het rubriekelement. U kunt deze veilig verwijderen / bewerken zonder zich zorgen te maken om andere elementen te beïnvloeden. Je kunt ook zien dat de kleine titel een variatie was van de header-titel, maar dat de alt-titelstijl voor een ander element was.

Naar mijn mening, bij het volgen van deze combinatie van structuur en naamgeving van de naamgeving, is het vrij eenvoudig om schone, gemakkelijk onderhoudbare CSS-stijlen te creëren. Context kan snel worden verkregen en op zichzelf staande modules van CSS kunnen worden gekopieerd en geplakt in andere projecten, of gewijzigd en met gemak worden verwijderd.

Het lijkt misschien alsof het probleem van de rommelige en onverhawichtbare code was opgelost. Maar als responsief ontwerp werd steeds relevanter, het werd duidelijk dat we veel van onze fouten herhaalden en slecht gestructureerde, overdreven complexe benaderingen genereren tot het creëren van responsieve websites.

Het oplossen van dit probleem is waar Media Query Bubbling in het spel komt.

Responsieve stijllocaties

Dankzij de genoemde verbeteringen in onze aanpak van het maken van CSS, wanneer ik tegenwoordig een project erfen of samenhangen, ervaar ik zelden de angst of bezorgdheid dat ik mezelf opent om in een vuur van specificiteitshel of structurele desorganisatie in brand te vallen in die situaties hebben. Ik weet nu dat ik snel relevante klassen en stijlen kan vinden en begrijpen, dankzij het benoemen van methodologieën, en mijn wijzigingen aanbrengen zonder onvoorstelbare gevolgen voor andere elementen, dankzij modulaire CSS.

Helaas is een belangrijke oorzaak van frustratie die ik tegenkomt dat responsieve stijlen nog steeds in overeenstemming zijn met het hele project. Ze zijn misschien wel in een modulaire structuur en genoemd op de juiste manier in een naamgevingsmethodologie, maar project per project zie ik veel verschillende manieren waarop ontwikkelaars ervoor kiezen hun responsieve stijlen op te nemen.

Sommige maken bijvoorbeeld een aparte Sass-partiële genaamd _mobile.scss of _tablet.scss. Sommige plaatsmediaquery's onderaan het relevante bestand in stijgende of aflopende volgorde en anderen plaatsen ze gewoon willekeurig tussen stijlen voor andere elementen. Met deze aanpak vind ik mezelf tussen bestanden en scrollen naar de boven- en onderkant van bestanden om een volledig begrip van de stijlen van één element in verschillende breekpunten te krijgen.

Media query borrelen

Zoals je kunt zien, zijn er veel problemen hiermee die allemaal combineren om ervoor te zorgen dat de ontwikkelaar meer tijd aan veranderingen aan veranderingen / wijzigingen doorbrengt dan eigenlijk nodig is.

Het dupliceert stijlen en maakt het proces van het onderhouden en vinden van alle relevante stijlen voor een component harder. Je moet op meerdere locaties of bestanden kijken om een compleet beeld van de stijlen van een element te krijgen.
Het element is niet langer op zichzelf staande. U kunt het niet eenvoudig hergebruiken in een ander project of vertrouwelijk verwijderen / wijzigen zonder nadelige beïnvloede of aanhoudende code.
Voor elk nieuw project wordt tijd verspild hoe dat project responsieve stijlen nadert.
Schakelen tussen projecten wordt moeilijker omdat je moet schakelen tussen benaderingen in je hoofd. Dit kan leiden tot projecten die per ongeluk een mix van benaderingen hebben, wat opnieuw leidt tot rommelige CSS.

De oplossing die ik wil implementeren om dit te verhelpen, wordt mediaquery genoemd, borrelen. De eenvoudigste manier om uit te leggen, is om media-query's te overwegen om op elke andere variatie van uw modulaire element te zijn. Hetzelfde als een BEM-variatieklasse van .Hearing__Title is .Hearing__title-variatie, bijvoorbeeld. Dit betekent dat de mediaquery binnen moet worden genest, net als uw modificerende klassen. Zie de volgende code als een voorbeeld hiervan:

 .Heater {
Achtergrond: $ zwart;

@media alleen scherm en (min-breedte: 640px) {
Achtergrond: $ wit;

}

In dit voorbeeld kunt u duidelijk op één locatie zien dat de achtergrond voor de koptekst verandert in wit op 640px of hoger. Door zelfbevattende media-query samen met de stijlen van het element, heeft u opnieuw een volledig op zichzelf staande module gemaakt die met vertrouwen kan worden hergebruikt of bewerkt. Het is niet nodig om een _mobile.scss-bestand te controleren of het project te zoeken naar andere vermeldingen van de klasse om er zeker van te zijn dat u alle breekpunten hebt bedekt.

Geneste media-query borrelen

Nogmaals, ik heb veel variaties gezien van hoe ontwikkelaars ervoor kiezen om de responsieve stijlen van hun elementen te structureren. Dit moet als niet anders worden beschouwd dan het stylen van het ouderelement en alle media-query's en stijlen moeten op zichzelf staan. Zie het volgende voorbeeld:

. Heading__Title {
FONT-GROOTTE: 16PX;

@media alleen scherm en (min-breedte: 640px) {
FONT-SIZE: 18PX;


& amp;. Heading__Title - Klein {
FONT-GROOTTE: 14PX;

@media alleen scherm en (min-breedte: 640px) {
FONT-GROOTTE: 16PX;


}

Je kunt zien dat de lettergrootte voor de kop__title groter wordt wanneer de viewport 640px of groter is en hoe de kleinere variatie van de titel van de rubriek ook vergroot, maar is gedefinieerd om kleiner te zijn dan standaard. Met behulp van deze techniek is het erg belangrijk om de BEM-methodologie sterk toe te passen om ervoor te zorgen dat u niet in het nestelen van verschillende niveaus diep. Zorg er bijvoorbeeld voor dat het .Hearing__title-element een op zichzelf staande CSS-module is die niet onnodig is genest in het. Hoofdelement.

Reiniger responsieve stijlen

Door te nemen wat we hebben geleerd van de voordelen van BEM en Modular CSS en het toepassen van het op media-query's binnen dezelfde structuur, stoppen we onszelf van het herhalen van de fouten van ons verleden.

Door op deze manier met media-query's te werken, hoeft u geen volledig nieuwe methodologie of structuur voor uw stijlen te leren. We nemen eigenlijk de modulaire CSS-benadering en het toepassen op onze mediaquery's, die zich vrij natuurlijk moeten voelen.

We maken ook schonere CSS met minder duplicatie van CSS-klassen in bestanden en het opslaan van ontwikkelingstijd door de noodzaak te verwijderen om meerdere locaties te controleren bij het maken van wijze.

Dit artikel is oorspronkelijk gepubliceerd in netto- , het magazine voor professionele webontwerpers en ontwikkelaars. Abonneren op net hier

Gerelateerde artikelen:

Maak coole UI CSS-animaties met Sass
10 dingen die je nooit wist dat je het met sass kon doen
Webdesignhulpmiddelen om u te helpen slimmer te werken

Hoe de media-query's in Sass

CSS in het verleden

Preprocessors, het benoemen van conventies en modulaire CSS

Responsieve stijllocaties

Media query borrelen

Geneste media-query borrelen

Reiniger responsieve stijlen

Procedures - Meest populaire artikelen

Portretfotografie: hoe u perfecte portretten kunt nemen

Aan de slag met GraM CMS

Een inleiding tot CSS Aangepaste eigenschappen

Verf een portret zoals de oude meesters

Bouw een aangepaste Maya-interface

Maak een geanimeerde gif in Photoshop

Maak 3D-kleding met realistische plooien en vouwen

Maak een harig 3D-personage van nul

Categorieën