Kuinka rakentaa mediakyselyt Sassissa

Sep 14, 2025

Miten tehdään

Käytännöllisesti katsoen jokainen sivusto on nyt rakennettu ainakin nyörään reagoivaan web-suunnitteluun. Näillä reagoivilla tyyleillä on suora yhteys siihen, miten monimutkainen projekti on tulevaisuudessa ylläpitää ja muokata päivityksiä, ja projekti kasvaa kooltaan.

Tästä huolimatta näyttää siltä, että laajalti hyväksytty lähestymistapa siitä, miten ja mihin rakentaa nämä reagoivat tyylit ovat vielä hyväksyttäviä johdonmukaisesti kehittäjille. Vaikka ei ole yhtä lähellä CSS: n vanhoja päiviä "ennen esikäsittelijöitä ja nimitysmenetelmiä, tämä aiheuttaa epäjohdonmukaisen ja usein sotkuisen lähestymistavan elementtien reagoivien tyylien rakentamiseen.

Vain aloittaa sivustosi kanssa? Valita alkuun Verkkosivuston rakentaja ja sivujen ylläpito Palvelu. Työskentely suuren joukkueen kanssa? Varmista, että pilvivarasto Pitää kaikki ajan tasalla suunnittelujärjestelmän kanssa.

Mikä on sass?

CSS aiemmin

Ymmärtää ongelma, jonka olemme edessään, mene takaisin alkuun. Yksi syy siihen, että CSS-esikäsittelijät, kuten Sass tai vähemmän luodut, johtuvat ensimmäisessä paikassa, koska CSS voi saada erittäin sotkuinen ja on tunnettu ylläpitää. Meillä oli tarkoitus löytää, että jonkin aikaa, jopa pienillä verkkosivustoilla oli linjoja CSS-tyylejä, jotka jätettiin paikalleen vain siksi, että kehittäjä oli epävarma, jos se vaaditaan tai poistetun ominaisuuden tai vanhentuneen elementin jäänteet, jotka voitaisiin poistaa.

Ota seuraava skenaario esimerkkinä:

 .heading {tausta: # 000000; };
.Title {font-koko: 16px; };
.Title_small {font-koko: 14PX; }
.Title_alt {font-perhe: sans-serif; }

Vaikka saatat ajatella, että se on turvallista olettaa .Title-elementti on tämän kontekstin otsikko, itse asiassa et todellakaan ole täysin varma siitä, että sitä ei käytetä minkä tahansa muun otsikon elementin tyyliin . Myös missä käytetään .Title_alt -luokkaa ja onko se vielä tarpeen tai käytössä? Näet, kuinka jopa niin yksinkertaisella esimerkillä voi olla aikaa vievä harjoitus tarkistaa kaikki tämä ennen muutoksia.

Tämän vuoksi monet kehittäjät säästävät aikaa lisäämällä uusi luokka elementtiin tai käyttämällä monimutkaisempia CSS-valitsin tekemään haluttuja muutoksia, jotka vuorostaan lisäsi CSS: n monimutkaisuutta seuraavalla kerralla muutos .

Esikäsittelyt, nimeävät yleissopimukset ja modulaariset CSS

Kyseisten tyylien kykyä käyttää muuttujia, laajenna muita luokkia ja enemmän, esikäsittelijät mullistivat tapaa, jolla luomme ja ylläpidämme CSS: tä. Valitettavasti he eivät täysin ratkaise sotkuisia, vanhentuneita tyylejä, jotka levittävät ja kasvavat koko projektin ajan kuin se ikään kuin infektio.

Samoin kuin nimeävät yleissopimukset ja CSS-menetelmät, kuten Bem , joka sovellettaessa antaa paljon suuremman kontekstin tyyleille.

Yhdistettynä muunnelmien, muutosten ja sisäkkäisten elementtien tyyliin itsenäisesti käyttämällä CSS-moduulit , todella vahva tapa rakentaa tyylit syntyi.

Alla näet, miten nämä parannukset voivat ratkaista ongelmat, joita tapasimme aikaisemmalla koodimme esimerkkinä:

 .heading {
Taustaa: $ musta;
}

.Heading__Title {
Fontti-koko: 16PX;

& amp; .heading__Title - pieni {
Fontti-koko: 14PX;
}
}

.post__Title - Alt {
Fontti-perhe: Sans-Serif;
}

Se on välittömästi selvää, että otsikon tyylit ovat spesifisesti otsikkoelementtiin. Voit poistaa ne turvallisesti / muokata niitä ilman huolia vaikutuksesta muihin elementteihin. Voit myös nähdä, että pieni otsikko oli otsikon otsikon vaihtelu, mutta alt-otsikon tyyli oli toiselle elementille.

Mielestäni tämän rakenteen ja nimeämismenetelmien yhdistelmän jälkeen se on melko helppo luoda puhdas, helposti ylläpitävät CSS-tyylit. Konteksti voidaan nopeasti saada ja CSS: n itsenäiset moduulit voidaan kopioida ja liittää muihin hankkeisiin tai muutetaan ja poistetaan helposti.

Se voi tuntua siltä, että sotkuinen ja epämiellyttävä koodi ratkaistiin. Mutta reagoiva muotoilu tuli yhä tärkeämmäksi, tuli ilmeiseksi, että toistettiin monia virheitämme uudestaan ja synnytimme huonosti jäsenneltyjä, liian monimutkaisia lähestymistapoja reagoivien verkkosivustojen luomiseen.

Tämän ongelman ratkaiseminen on silloin, kun media kyselykupli tulee pelaamaan.

Vastaavat tyylipaikat

Mainittujen parannusten ansiosta CSS: n luominen CSS: n luomiseksi, aina kun periä tai tehdä yhteistyötä hankkeella näinä päivinä, olen harvoin kokea pelko tai huolenaihe, jonka avain itseni joutumaan spesifisyyden helvetin tai rakenteellisen epäjärjestykseen, jota käytin niissä tilanteissa. Tiedän nyt, että voin nopeasti löytää ja ymmärtää asiaankuuluvat luokat ja tyylit nimitysmenetelmien ansiosta ja tehdä muutokset ilman käsittämättömiä seurauksia muihin elementteihin modulaaristen CSS: n ansiosta.

Valitettavasti yksi tärkein syy turhautumiseen, jota kohtaat, on se, että reagoivat tyylit ovat edelleen ristiriidassa koko projektissa. Ne voidaan hyvin sisällyttää modulaariseen rakenteeseen ja jotka on nimetty asianmukaisesti nimeämismenetelmiin, mutta projekti projekti näen monia eri tavoin, joita kehittäjät haluavat sisällyttää reagoivan tyyleensä.

Jotkut luovat erillisen SASS-osittaisen nimeltään _mobile.Scs tai _TABLET.SS.SS.SS. Jotkut paikan mediakyselyt asiaankuuluvan tiedoston alareunassa nousevissa tai laskevassa järjestyksessä ja muut vain sijoittavat ne satunnaisesti muiden elementtien tyylin välillä. Tämän lähestymistavan avulla löydän itseni väliltään tiedostojen välillä ja selaamalla tiedostojen ylä- ja alaosaan vain saadakseen täydellisen ymmärryn yhden elementin tyylistä eri katkaisupisteissä.

Media Query Bubbling

Kuten näette, tällä on monia ongelmia, jotka kaikki yhdistyvät, jotta kehittäjä viettää enemmän aikaa muutoksiin / tarkistuksiin kuin todella tarvitaan.

Se kopioi tyylejä ja tekee prosessin ylläpitää ja löytää kaikki asiaankuuluvat tyylit komponentti kovemmin. Sinun täytyy katsoa useita paikkoja tai tiedostoja, jotta saat täydellisen kuvan elementin tyylistä.
Elementti ei ole enää itsenäinen. Et voi helposti käyttää sitä toisessa projektissa tai luottavaisesti poistaa / muuttaa sitä ilman haitallisia vaikutuksia tai viipymättä jäljellä.
Jokaiselle uudelle hankkeelle aika on hukkaan selvittänyt, miten tämä projekti lähestyy reagoivia tyylejä.
Hankkeiden vaihtaminen on vaikeampaa, koska sinun on vaihdettava pään lähestymistapojen välillä. Tämä voi johtaa hankkeisiin, jotka vahingossa ovat yhdistelmä lähestymistapoja, mikä taas johtaa sotkuisiin CSS: hen.

Ratkaisu, jota haluan toteuttaa korjata tätä kutsutaan Media Query Bubble. Yksinkertaisin tapa selittää, että mediakyselyt ovat kuin muut modulaarisen elementin muunnelmat. Sama kuin BEM-muunnosluokka ..heading__Title on esimerkiksi ..heading__Title-vaihtelu. Tämä tarkoittaa, että mediakyselyn pitäisi olla sisäkkäitä, aivan kuten muutosluokkaasi. Katso seuraava koodi esimerkkinä tästä:

 .header {
Taustaa: $ musta;

@Media vain näyttö ja (min-leveys: 640px) {
Taustaa: $ Valkoinen;
}
}

Tässä esimerkissä voit selvästi nähdä yhdessä paikassa, että otsikon tausta muuttuu valkoiseksi 640px: ksi tai korkeampi. Selaa mediakysely yhdessä elementin tyylejä, olet jälleen luonut täysin itsenäisen moduulin, jota voidaan käyttää uudelleen tai muokata luottamusta. Ei ole tarvetta tarkistaa _mobile.Scss-tiedoston tai etsiä projektia muiden luokan mainitsemista varten, että olette kattaneet kaikki katkokset.

Sisäinen mediakyselykupli

Jälleen olen nähnyt monia muunnelmia siitä, miten kehittäjät voivat rakentaa niiden elementtien reagoivia tyylejä. Tätä ei pidä olla erilainen kuin emolementin muotoilu ja kaikki mediakyselyt ja tyylit olisi itsenäinen. Katso seuraava esimerkki:

 .heading__Title {
Fontti-koko: 16PX;

@Media vain näyttö ja (min-leveys: 640px) {
Fontti-koko: 18px;
}

& amp; .heading__Title - pieni {
Fontti-koko: 14PX;

@Media vain näyttö ja (min-leveys: 640px) {
Fontti-koko: 16PX;
}
}
}

Voit nähdä, että otsikon __itle fonttikoko nousee, kun näkymä on 640px tai suurempi ja kuinka pienempi muunnelma myös laajenee, mutta määritellään pienempi kuin vakio. Tämän tekniikan avulla on erittäin tärkeää soveltaa BEM-menetelmää voimakkaasti sen varmistamiseksi, ettet pääty pesemään useita tasot syvälle. Varmista esimerkiksi, että .heading__Title-elementti on itsenäinen CSS-moduuli, jota ei ole tarpeen sisäkkäin.

Puhdistavat tyylit

Ottamalla, mitä opimme BEM: n ja modulaaristen CSS: n tarjoamista eduista ja soveltamalla sitä samassa rakenteessa mediakyselyihin, lopetamme itsemme toistamasta menneisyyden virheitä.

Työskentelemällä mediakyselyt tällä tavoin sinun ei tarvitse oppia täysin uutta metodologiaa tai rakennetta tyyleille. Olemme pohjimmiltaan ottamalla modulaariset CSS-lähestymistavan ja soveltamalla sitä mediakyselymme, minkä pitäisi tuntea melko luonnollista.

Luodaan myös puhtaampia CSS: tä, joilla on vähemmän päällekkäisiä CSS-luokkia tiedostoja ja säästää kehitysaikaa poistamalla tarve tarkistaa useita paikkoja tehdessään.

Tämä artikkeli julkaistiin alun perin vuonna 2003 netto , ammattimaisten web-suunnittelijoiden ja kehittäjien aikakauslehti. Tilaa verkko tähän .

Aiheeseen liittyvät artikkelit:

Luo viileitä UI CSS-animaatioita Sass
10 asiaa, joita et koskaan tiennyt, voisit tehdä Sass
Web-suunnittelutyökalut, joiden avulla voit työskennellä älykkäämpiä

Kuinka rakentaa mediakyselyt Sassissa

CSS aiemmin

Esikäsittelyt, nimeävät yleissopimukset ja modulaariset CSS

Vastaavat tyylipaikat

Media Query Bubbling

Sisäinen mediakyselykupli

Puhdistavat tyylit

Miten tehdään - Suosituimmat artikkelit

Kuinka tehdä Rose: aloittelija ja kehittyneet vinkit

Pysäytä robotit Google ReCAPTCHA: lla

Maali ekspressiivinen muotokuva Artrage 5

Hanki enemmän grafiittia näillä vinkkeillä

Luo viihtyisä sisustus linja-art

8 Essential WordPress Security Secrets

Kuinka luoda värikkäitä maailmoja, jotka kertovat tarinan

Tee Hi-Fidelity Prototyyppi Atomicissa

Luokat