SCSS failu kombinēšana - padomi un triki struktūrai

Tu vēlies savas CSS-failus sakārtot un efektīvi apvienot? Sass piedāvā iespēju importēt dažādus SCSS-failus un apvienot tos. Šajā rokasgrāmatā es parādīšu, kā to izdarīt un uz ko tev vajadzētu pievērst uzmanību.

Svarīgākās atziņas

• Importē SCSS-failus ar @import, lai tos apvienotu centrālajā failā.
• Izmanto priekšā esošu zemsvītru (_) faila nosaukumā, lai novērstu atsevišķas CSS-faila ģenerēšanu.
• Centrālais kontroles fails palīdz saglabāt tavu Sass kodu sakārtotu.

Soļi pa soļiem

Pirmkārt, noskaidro, kuru sintaksi tu vēlies izmantot. Sass ir divas sintakses iespējas: klasiskā Sass sintakse un SCSS sintakse. Es rekomendēju SCSS sintaksi, jo tā piedāvā tev vairāk elastības, īpaši, ja vēlies izmantot esošo CSS bez nepieciešamības to pielāgot.

Tagad ir laiks atvērt savu projekta direktoriju. Izveido savas SCSS-failus sakārtotā direktorijā. Tev var būt vairāki SCSS faili, kuri katrs apstrādā dažādus tavu mājaslapas stila aspektus.

Pieņemot, ka tu jau esi izveidojis vairākus SCSS-failus. Tagad tev jāsaprot, kā tu vēlies importēt šos failus. Izmanto @import pavēli, lai importētu SCSS-failus centrālajā failā, piemēram, app.scss.

Lai izveidotu importēšanas pavēli, tavā centrālajā failā vienkārši ievadi @import 'tavs_fails';. Ja tu nevēlies izmantot CSS sufiksus, vari tos izlaist. Tas padara to sakārtotāku un vieglāku failu pārvaldīšanai.

Īpaši noderīgs triks ir izmantot priekšā esošu zemsvītru faila nosaukumā. Ja tu izveido failu ar nosaukumu _fong.scss, tas netiks ģenerēts kā atsevišķs CSS fails. Tas atvieglo failu pārvaldību tavā projektā, jo novērš nevajadzīgu CSS failu rašanos.

Tagad tu vari aplūkot savu centrālo SCSS faili. Tu neredzēsi importēto failu kā atsevišķu CSS failu, kas palīdz uzturēt tavu izvadi sakārtotu. Tas nozīmē, ka tu vari vienkārši pārvaldīt savus stilus vienā failā.

Izveido centrālo kontroles failu. Nosauc to piemēram, app.scss. Šis kontroles fails saturēs importēšanas pavēles visiem taviem SCSS-failiem. Tā tu iegūsi labu pārskatu par visa projekta stilu.

Ja tu izmanto apakšdirektorijas, ņem vērā, ka tev jādod direktorijas nosaukums importēšanas pavēlē. Tas ļauj saglabāt tava projekta struktūru skaidru un sakārtotu.

Importēšanas secība ir izšķiroša. Vēlākie stila elementi pārraksta iepriekšējos. Pārliecinies, ka tu tos importē vēlamajā secībā, lai izvairītos no nevēlamām pārrakstēm.

Ja viss ir ievietots, un tu esi tīri iekļāvis SCSS-failus savā centrālajā failā, tu vari kompilēt projektu un pārbaudīt CSS-failu. Tu redzēsi, ka visas tavas stilu lietojums ir vienā failā, vienlaikus minimizējot HTTP pieprasījumu skaitu.

Kopsavilkums

Izmantojot @import kopā ar تنظيق (zemsvītra) faila nosaukumā, tu vari efektīvi apvienot SCSS-failus un uzlabot sava stilizējuma pārskatāmību. Centrālais kontroles fails nodrošina skaidru struktūru.