SASS tərəfindən yaradılan CSS Stilelint səhvlərini necə düzəltmək olar.

Beləliklə, sass istifadə etməyə başlamısınız, işləri asanlaşdırır, elə deyilmi? Doğrudur, amma bir gün, demək olar ki, bu barədə fikrimi dəyişən səhvlərə yol verdim.

SASS-a girmədən əvvəl, Bilməyənlər üçün Sintaktik Zəhmli Stil Cədvəlləri üçün dayanır və bu barədə bilmək üçün lazım olan hər şey etiket etiketində, "CSS gücləri ilə CSS" olaraq aydın şəkildə ifadə olunur. Bu yuva seçənlər, yuvalar və funksiyalar yaratmaq və CSS ilə edə biləcəyiniz digər əyləncəli əşyalar kimi işlər görməyə imkan verir.

Mən bir müddət bu barədə təcrübə keçirmişdim, amma əsl layihə üzərində işləmək üçün istifadə etməmişdim və etdiyimə qədər hamısı yaxşı idi və düşündüyüm zaman proyektimi tamamlayacağımı düşündüm. Yeri gəlmişkən (sass sayəsində), sonra stilelint işlədirəm və sassın tamamilə fərqli bir tərəfi ilə tanış olduğumda heç vaxt mövcud olmadığını bilirdim.

Əgər maraqlanırsınızsa, Stylelint, CSS üçün "stil lenti" dir. Bir lint və ya lint, proqram kod səhvlərini, səhvləri, stilistik səhvləri və şübhəli konstruksiyaları mənbə kodunu təhlil edən bir vasitədir. Beləliklə, Stylelint, orada olan bir çox digər linters növlərindən yalnız biridir ... və bəli, hətta sassın da onlardan biri olan linters var ... Siz bunu təxmin etdiniz, sass-lint.

İşlədiyim əmrə baxsanız, içərisində bir

İndi məni səhv etmə. Bu səhvlər sass üçün tək deyil. Bunlar normal zolaq səhvləridir. Təsir edin, vanil (saf) css istifadə edirsinizsə, əksəriyyəti düzəltmək çox asandır, mürəkkəbliyi aşağıda izah edəcəyim kimi sass ilə gəlir.

Budur rastlaşdığım səhvlərin tam siyahısı:

  • Gözlənilən selektor [selector] selektordan əvvəl [selector] gəlməlidir.
  • Gözlənilməyən dublikat [selektor və ya əmlak].
  • Məkanların [sayının] gözlənilən girişi.
  • "," -Dən sonra gözlənilən yeni xətt.
  • Sətrin sonunda gözlənilməz ağ boşluq.
  • Qaydadan əvvəl gözlənilən boş xətt.
  • Gözlənilməyən ümumi şrift ailəsi.
  • ")" -Dən sonra gözlənilən ağ boşluq.
  • Gözlənilməyən itkin mənbəli yeni xətt.
  • 1 boş xətdən çox olmaması gözlənilir.

Bu səhvlərin əksəriyyəti öz-özünə izah olunur və yuxarıdakı şəkildəki əksəriyyəti görə bilməməyinizin səbəbi stilelint əmrinə "--fix" seçimini əlavə etməyimdir. "Düzəlt" seçimi stilelintə avtomatik olaraq sizin üçün edə biləcəyiniz hər şeyi düzəltməyə imkan verir və əl ilə düzəldə bilmədiyinizi tərk edir.

İndi sass ilə! bu asan deyil. Əlbətdə olmasa, proyektinizlə tamamlandığınızdan və konkret layihə üzərində bir daha sass istifadə etməyəcəyinizdən əmin olduğunuz halda, sass tərtibatını dayandırıb bütün sass faylları .gitignore-a yerləşdirə və ya sadəcə silə bilərsiniz onları. Sonra, oradan birbaşa CSS sənədlərindəki mövcud səhvləri düzəldə bilərsiniz və bir gün zəng edə bilərsiniz. Gələcəkdə hər hansı bir nöqtədə həmin layihədəki eyni fayllara sass istifadə etməyə davam etmək niyyətindəsiniz ... onda bu səhvləri sass faylları vasitəsi ilə düzəltməlisiniz.

Unutmayın, sass istifadə edərkən, sassın tərtib etdiyi css sənədlərindəki bir şeyi dəyişdirməyiniz lazım deyil, çünki yenidən sass tərtib edəndən sonra etdiyiniz bütün dəyişikliklər itiriləcəkdir. Bu kimi alın. Sass tərəfindən tərtib edilmiş bu css fayllarına toxunmayın. Onun vaxt itkisi. Orada yazdığınız heç bir şey hələ də CSS tərtib etmək üçün sass istifadə etdiyiniz müddətcə qalmayacaq.

Cass sənədlərinizdəki səhvləri sass fayllarınızdan tapmaq və düzəltmək düz deyil, çünki səhv mesajı css sənədinizdəki xətaya işarə edir, ancaq css sənədlərinizi birbaşa düzəldə bilmədiyinizi xatırlayın. Beləliklə, səhvləri ilə css faylını tərtib edən sass faylına gedib səhvin mənşəyini göstərməyə çalışmalısınız. Məsələn, main.css adlı bir faylda bir səhv üçün səhv tapmaq və düzəltmək üçün main.scss saytına gedin.

Qarşılaşdığım bəzi səhvləri yoxlayaq:

Gözlənilən selektor [selector] selektordan əvvəl gəlməsini [selector] - İnternetdə həllər axtardığımda bu səhv ətrafımda dolaşdı. Beləliklə, haradan başlayacağımı bilmədən boş bir üzlə redaktorumun terminalındakı səhvlərə baxmağa başladığım yerdən sona çatdım.

Sonradan bir çox çimdik və məsləhətləşmədən sonra mənim üçün işləməyi bacaran iki şeyi tapdım. "Ya seçicilərinizi yuva altına qoymağın qarşısını alırsınız" (bu, sass istifadə bütün məqsədini pozur) və ya "Əgər bütün elementlərinizə sinif adlarını verirsinizsə" (BEM haqqında oxuyun).

Bilirəm, səhv bu seçicidən əvvəl bu seçicini gözlədiyini söyləyir, buna görə maraqlana bilərsən, niyə biz onları sadəcə dəyişdirmirik? yaxşı, bu vanil css olsaydı, əminəm ki, niyə etmirsiniz? lakin sass ilə, HTML tags-i css seçiciləri (siniflər əvəzinə) kimi içəri salır. Mən də hər şeyi dəyişməyə çalışdım, amma sonra tezliklə dairələrdə hərəkət etdiyimi başa düşdüm ... bu səhvlərdən birini həll etmək, eyni səhvlərin digərinə səbəb oldu.

Gözlənilməyən Dublikat [selector və ya əmlak] - Bu css faylınızdakı bir selektorun altındakı cüt seçiciləri və ya dublikat xüsusiyyətlərini müəyyənləşdirdikdə ortaya çıxır. Misal üçün…

/Main.scss faylında
@mixin bg-img {background: {image: url ("../ image"); ölçüsü: örtük; mövqe: mərkəz; }}
.header {@ bg-img daxil edin; // mixin içərisindəki fon ölçüsü xüsusiyyətini yalnış etmək istədiyinizi söyləyin və @include ifadəsindən sonra qoydunuz. fon ölçüsü: 80%; }

Bu daxil edilir ...

/Main.css faylında
.header {background-image: url ("../ image"); fon ölçüsü: örtük; fon-mövqe: mərkəz; fon ölçüsü: 80%; }

Stilelint işlədikdə, bunu cüt sənəd kimi qeyd edəcəkdir.

Sassın bu "qismən" anlayışı var, "7-1 memarlıq / nümunə" anlayışı ilə yaxşı işləyir. Yaxşı mən bunların içinə girməyəcəyəm, ancaq bilməlisiniz ki, kodunuzu daha modulu etməyə kömək edir. Əsasən kodunuzu saxlamaq və miqyası daha asan olan daha kiçik hissələrə ayırmaq deməkdir.

Yaxşı, şey budur ki, kodunuzu düzülmə, komponentlər, mövzular, səhifələr və s. Kimi müxtəlif hissələrə ayırdığınız zaman bu sənədlərin əksəriyyətində müəyyən bir selektordan istifadə etməyiniz mümkündür. Bu baş verdikdə, özünüz kimi bir şey tapacaqsınız:

/Main.css faylında
// bir qismən
.header {Göstərmək: çevik; çevik istiqamət: sütun; }
100 sətirdən sonra css faylınızdakı bir yerə
// başqa bir qismən
.header {background-color: qırmızı; }

Stylelint-i işlətdiyiniz zaman bunu cüt seçici kimi qeyd edəcək, çünki yadınıza salın, bütün hissələriniz bir css faylına yığılmışdır. Bunu düzəltmək üçün seçicini (məsələn, başlıq) bir hissədən silmək və içərisində olanı digərinə köçürməklə başa vurursunuz. Beləliklə, sass onu tərtib edərkən modulizasiya planlarınıza bir az qarışan CSS-də bir selektor kimi göstərilir.

Bütün digər səhvlərin sass ilə əlaqəsi azdır və ya heç bir əlaqəsi yoxdur və əksəriyyəti stilelint əmrinə "--fix" seçimi əlavə etməklə asanlıqla düzəldilə bilər. Buna görə hamısına girməyəcəm.

Mən də sass sənədlərimdə stilelint işlədim və bu ortaya çıxdı ....

Əlbətdə ki, "- fix" seçimi ilə işlədim və çox səhvləri aradan qaldırdım və bu məni tərk etdi.

İndi bu səhvlər əsasən "@include" və "@mixin" kimi bəzi sass at-qaydalarının stilelint üçün məlum olmadığını söyləyirlər. Stylelint qismən bir .scss fayl uzantısı olan sass faylları üçün işləyirsə də, stylelint CSS üçün nəzərdə tutulub. Beləliklə, bu problemləri həll etmək üçün stilelint konfiqurasiya sənədimi düzəltməli və bu xüsusi qaydalara məhəl qoymağıma ehtiyac duyduğumu, ancaq mənim css sənədlərimə heç bir təsir göstərməyəcəyini görüb bu səhvləri dəyər verməyə dəyməz dərd. Beləliklə, bütün sass sənədlərimi .gitignore sənədimə əlavə edərək onlardan qurtuldum və bu hiylə oldu.

Sass fayllarımda stilelint işlətməyimin səbəbi, əsas etibarilə uzaq Github depolarınızda linter çeklərini işlədən Stickler istifadə etməyim idi. Layihənizdə linf konfiqurasiya sənədlərində müəyyən edilmiş qaydaları əsasən stilelint ilə etdiyiniz eyni yoxlamaları etmək üçün istifadə edir. Ayrıca, hansı stilelint-i yerli olaraq işləyə biləcəyinizi seçdiyiniz halda, digər tərəfdən yapışqan sass fayllarınızı daxil edən bütün üslub sənədlərinizi yoxlayır.

Bir github çəkmə istəyi etməyə çalışdığınız zaman işə düşür və bütün lazımi sətir çeklərini işə salır və kodunuzu birləşdirmədən əvvəl hər hansı bir səhv varsa sizə məlumat verir. İndi sass sənədlərimdə stilelint işlətdiyim və sonradan onları .gitignore sənədimə əlavə etdiyim, əks halda yuxarıdakı son görüntüsündə gördüyünüz eyni səhvlər yenidən çəkmə yaratmaq istəyirdimsə yapışqanlarla qeyd ediləcəkdir. kodu birləşdirməyimi xahiş et.

Nəticə

Sass böyükdür və çox faydalıdır, geliştirici üçün həyatı asanlaşdırır. İndi cazibədarlığı ilə yoluxduğumu başqa bir şəkildə kodlaşdırmağı təsəvvür edə bilmirəm.

Demək olar ki, sass haqqında düşüncəmi dəyişdirən gözlənilməz bir divara qaçdım və onu aşdığım zaman başqasının ilişib qalması halında paylaşacağımı hiss etdim. Allah bilir ki, başqalarının məqalələrindən çox şey əldə etmişəm. BEM və SASS-də təsvir olunan bu üsul: Andy Barnes tərəfindən mükəmməl bir uyğunlaşma gələcəkdə sizi qıcıqlandırıcı səhvlərdən sübut etmək üçün yola davam edəcək və kodunuzu qorumaq və ya miqyaslaşdırmaqda da kömək edəcəkdir.