Hogyan szerelje fel a média lekérdezéseit a SASS-ben

Sep 16, 2025

kézikönyv

Gyakorlatilag minden webhely most már legalább egy bólintás, hogy az érzékeny webdesign. Az érzékeny stílusok kialakításának módja közvetlen kapcsolatban áll azzal, hogy milyen összetett a projekt, hogy a jövőben a jövőben a frissítések, és a projekt növekszik.

Ennek ellenére úgy tűnik, hogy egy széles körben elfogadott megközelítés, hogy hogyan és hol szerkezete ezeknek az érzékeny stílusoknak még a fejlesztők következetesen kerülnek elfogadásra. Bár a CSS "régi napjai", az előfeldolgozók és az elnevezési módszertanok előtt, ez ellentétes és gyakran rendetlen megközelítést okoz az elemek érzékeny stílusainak felépítéséhez.

Csak kezdeni a webhelyed? Tetejét választ weboldal építője és web hosting szolgáltatás. Egy nagy csapatmunka? Győződjön meg róla, hogy felhő tároló Mindenkit naprakészen tartja a tervezési rendszerrel.

Mi a sass?

CSS a múltban

Megérteni, hogy megértsük a problémát, menjünk vissza az elejére. Ennek egyik oka, hogy a CSS preprocessors, mint Sass-kevésbé jöttek létre az első helyen van, mert a CSS lehet kapni nagyon piszkos és közismerten nehéz fenntartani. Régebben azt találtuk, hogy egy darabig is, még a kis weboldalak is voltak vonalak a CSS stílusok soraiban, amelyek csak azért voltak, mert a fejlesztő bizonytalan volt, ha szükséges, vagy az eltávolított tulajdonság vagy az elavult elem maradványai, amelyek törölhetők.

Vegye ki a következő forgatókönyvet:

 .Heading {háttér: # 000000; };
.title {betűméret: 16px; };
.title_small {betűméret: 14px; }
.title_alt {Font-Család: Sans-Serif; }

Bár úgy gondolja, hogy biztonságos feltételezni, hogy a .title elem a .hading elem címe ebben az összefüggésben, valójában nem lehet teljesen biztos abban, hogy nem használható meg, hogy ne használjon más címelemet a webhelyen . Továbbá, hol van .title_alt osztály, és még mindig szükséges vagy használatban van? Láthatja, hogy még egy ilyen egyszerű példával is időigényes gyakorlást jelenthet, hogy mindezeket ellenőrizze, mielőtt a változtatásokat elvégezné.

Emiatt sok fejlesztő időt takaríthat meg azáltal, hogy új osztályt adna az elemhez, vagy egy összetettebb CSS-választó segítségével, hogy a kívánt változtatásokat elvégezzék, ami akkor a következő alkalommal növelte a CSS komplexitását .

Előfeldolgozók, egyezmények és moduláris CSS elnevezése

Hála a képességét, hogy fészket stílusok használata változók terjeszteni más osztályokba, és több, preprocessors forradalmasították az, hogy hozzon létre és tart fenn CSS. Sajnos nem oldják meg teljesen a rendetlen, elavult stílusok problémáját, amelyek terjednek és növekednek egy projekt során, mint egy fertőzés.

Az elnevezési konvenciók és a CSS-módszerek, mint például Bem , amely mikor alkalmazott sokkal nagyobb szintű kontextust ad a stílusokhoz.

Ha kombinálják a módosításokat, módosításokat és a beágyazott elemek önálló használatát CSS modulok , egy igazán erős módja annak, hogy felépítsd a stílusokat.

Az alábbiakban láthatja, hogy ezek a fejlesztések hogyan oldhatják meg a korábbi kóddal kapcsolatos problémákat:

 .Heading {
Háttér: $ Black;
}

.Heading__title {
Betűméret: 16px;

& amp; .Heading__title - kicsi {
Betűméret: 14px;
}
}

.post__title - alt {
Font-Család: Sans-Serif;
}

Ez azonnal világos, hogy a cím stílusok itt kifejezetten tartalmazza a címsor elem. Biztonságosan eltávolíthatja / szerkesztheti ezeket anélkül, hogy aggódnának más elemek befolyásolására. Azt is láthatja, hogy a kis cím a fejléc címének változása volt, de az Alt cím stílusa egy másik elemre volt.

Véleményem szerint, amikor a szerkezeti és elnevezési módszertani kombinációt követően meglehetősen könnyű tiszta, könnyen karbantartható CSS stílusokat hozni. A kontextus gyorsan megszerezhető, és a CSS önálló moduljai más projektekben másolhatók és beilleszthetők, vagy könnyedén módosíthatók és eltávolíthatók.

Úgy tűnik, hogy a rendetlen és a helyettesíthetetlen kód problémája megoldódott. De mivel a reagáló design egyre relevánsabb lett, nyilvánvalóvá vált, hogy újra megismételjük a hibáinkat újra, és súlyosan strukturált, túlzottan összetett megközelítéseket generálunk az érzékeny weboldalak megteremtéséhez.

A probléma megoldása az, ahol a média lekérdezés buboréka jön.

Érzékeny stílusú helyek

Köszönhetően a CSS létrehozásának javulásának javításának köszönhetően, amikor ezekben a napokban örökölnék vagy együttműködöm a projekten, ritkán tapasztalhatom a rettenet vagy aggodalmat, hogy megnyíltam magam, hogy a pokol és a strukturális disorganizáció tűzbe kerüljek e helyzetekben. Most már tudom, hogy gyorsan meg tudom találni és megérteni az releváns osztályokat és stílusokat az elnevezési módszertanoknak köszönhetően, és a módosítások elképzelhetetlen következményei nélkül, a moduláris CSS-nek köszönhetően.

Sajnos a frusztráció egyik legfontosabb oka, hogy a reagáló stílusok még mindig inkonzisztensen vannak elhelyezve a projektben. Lehet, hogy egy moduláris szerkezetben vannak, és megfelelő módon nevezhetők el egy elnevezési módszertanban, de a projekt projekt szerint sokféle módon látom, hogy a fejlesztők úgy döntenek, hogy a reagálási stílusukat tartalmazzák.

Néhányan létrehoznak egy külön Sass részleges nevű _mobile.sss vagy _tablet.scsss. A megfelelő fájl alján lévő média lekérdezések növekvő vagy csökkenő sorrendben, és mások csak véletlenszerűen helyezik el őket más elemek stílusai között. Ezzel a megközelítéssel a fájlok között találok, és a fájlok tetejére és alján görgetek, csak azért, hogy teljes mértékben megértsük az egyik elem stílusát különböző töréspontok között.

Média lekérdezés buborékolás

Amint láthatja, sok probléma van ezzel, hogy minden kombinál, hogy a fejlesztő több időt töltsön a módosítások / módosításoknál, mint amire szükség van.

Duplikálja a stílusokat, és megteremti az összes releváns stílus fenntartását és megtalálását egy komponens nehezebbé tételére. Több helyen vagy fájlban kell megjelennie, hogy teljes képet kapjon egy elem stílusairól.
Az elem már nem önálló. Nem könnyedén újrafelhasználhatja egy másik projektben, vagy magabiztosan törölheti / módosíthatja anélkül, hogy hátrányos hatással van, vagy az elhasználódott kód marad.
Minden új projekt esetében az idő elpazarolt, hogy a projekt hogyan közelíti meg az érzékeny stílusokat.
A projektek közötti váltás nehezebbé válik, mert a fejedben lévő megközelítések között kell váltania. Ez véletlenül olyan projektekhez vezethet, amelyek a megközelítések keverékével rendelkeznek, ami ismét rendetlen CSS-hez vezet.

A megoldás, amit szeretek a javításhoz, az úgynevezett média lekérdezés buborék. A legegyszerűbb módja annak, hogy megmagyarázzuk a média lekérdezéseket, hogy olyanok legyenek, mint a moduláris elem bármely más változata. Ugyanaz, mint a .Heading__title BEM variációs osztály. Például. Ez azt jelenti, hogy a média lekérdezést be kell helyezni, mint a módosító osztályok. Lásd a következő kódot példaként:

 .Header {
Háttér: $ Black;

@Media csak képernyő és (min-szélesség: 640px) {
Háttér: $ White;
}
}

Ebben a példában egyértelműen egy helyen látható, hogy a fejléc háttere 640px-re vagy magasabbra változik. A média lekérdezésével együtt az elem stílusaival együtt ismét létrehozott egy teljesen önálló modult, amely újra felhasználható vagy szerkeszthető bizalommal. Nincs szükség a _mobile.scss fájlra, vagy keresni a projektet az osztály egyéb említéséhez, hogy megbizonyosodjon arról, hogy minden töréspontot lefedte.

Beágyazott média lekérdezés buborékolás

Ismét láttam sok változatot arról, hogy a fejlesztők hogyan választják ki az elemek érzékeny stílusát. Ezt nem kell tekinteni, mint a szülőelem stílusa, és az összes média lekérdezés és stílus önállónak kell lennie. Lásd a következő példát:

 .Heading__title {
Betűméret: 16px;

@Media csak képernyő és (min-szélesség: 640px) {
Betűméret: 18px;
}

& amp; .Heading__title - kicsi {
Betűméret: 14px;

@media csak képernyő és (min-szélesség: 640px) {
Betűméret: 16px;
}
}
}

Láthatjuk, hogy a fejléc betűmérete nagyobb lesz, ha a nézetablak 640px vagy nagyobb, és hogy a fejléc kisebb változata is nagyítja, de a szabványnál kisebb, mint a szabvány. Ezzel a technikával nagyon fontos, hogy a BEM-módszert erősen alkalmazzuk annak biztosítására, hogy ne végezzen a fészket több szinten. Például, biztosítja, hogy a .heading__title elem egy önálló CSS modult, amely nem feleslegesen ágyazva a .heading elem.

Tisztább érzékeny stílusok

A BEM és a moduláris CSS által nyújtott előnyökből tanultak, és ugyanazon struktúrán belüli média lekérdezésekre alkalmazzuk, megállítjuk a múltunk hibáinak megismétlését.

A média lekérdezésekkel való együttműködéssel ebben az úton nem kell megtanulnia egy teljesen új módszertant vagy struktúráját a stílusok számára. Alapvetően a moduláris CSS-megközelítés és a média lekérdezésekhez való alkalmazása, amely meglehetősen természetesnek kell lennie.

A CSS-osztályok kevesebb megkétszerezésével is készítjük a CSS-osztályokat, és a fejlesztési időt takarít meg azzal, hogy eltávolítják a több helyszín ellenőrzésének szükségességét, amikor módosítják.

Ezt a cikket eredetileg közzétették háló , a szakmai webes tervezők és fejlesztők magazinja. Iratkozzon fel itt Netre .

Kapcsolódó cikkek:

Hozzon létre hűvös UI CSS animációkat a sasszával
10 dolog, amit soha nem tudtad, hogy meg tudod csinálni a sasszával
Webes design eszközök, amelyek segítenek az okosabb munkában

Hogyan szerelje fel a média lekérdezéseit a SASS-ben

CSS a múltban

Előfeldolgozók, egyezmények és moduláris CSS elnevezése

Érzékeny stílusú helyek

Média lekérdezés buborékolás

Beágyazott média lekérdezés buborékolás

Tisztább érzékeny stílusok

kézikönyv - Most Popular Articles

Adaptív elrendezések építése média lekérdezések nélkül

Tanulj meg egy 3D-s személyt ZBRUSH és MAYA-ban

Hogyan festeni egy színes zombi

Interaktív 3D-s tipográfia hatásai

Divat rugalmas elrendezések a CSS-rácskal

Hozzon létre egy reagáló műszerfalat a figmával

Hogyan festhet egy élénk virágos életet

Hogyan juthat el a ZBRUSH modelljéhez Maya

Kategóriák