Տարբերությունները Native CSS-ի և Sass Nesting-ի միջև

Հնարավոր է, որ շուտով ձեր CSS ոճերի թերթիկներում կօգտագործեք տեղադրված հայտարարություններ, բայց դուք պետք է ուշադրություն դարձնեք մանրամասներին, եթե տեղափոխվում եք Sass-ից:

Այն գործարկվելուց ի վեր, CSS-ը խստորեն մերժել է շարահյուսություն աջակցել բնադրող ընտրիչների համար: Այլընտրանքը միշտ եղել է Sass-ի նման CSS նախապրոցեսորի օգտագործումը: Բայց այսօր, nesting-ը պաշտոնապես հանդիսանում է հայրենի CSS-ի մի մասը: Դուք կարող եք փորձել այս հատկությունը ուղղակիորեն ժամանակակից բրաուզերներում:

Եթե դուք արտագաղթում եք Sass-ից, դուք պետք է հաշվի առնեք տեղական բնադրման և Sass բույնի միջև եղած տարբերությունները: Բնադրման երկու հատկանիշների միջև կան մի քանի հիմնական տարբերություններ, և դրանց մասին տեղյակ լինելը շատ կարևոր է, եթե դուք անցում կատարեք:

Դուք պետք է օգտագործեք «&» տարրերի ընտրիչներով Native CSS-ում

Ահա բնադրման տեսակի օրինակ, որը դուք կտեսնեք Sass-ում՝ օգտագործելով SCSS շարահյուսությունը.

.nav {
  ul { display: flex; }
  a { color: black; }
}

Այս CSS բլոկը սահմանում է, որ nav դաս ունեցող տարրի ներսում ցանկացած չդասավորված ցուցակ հավասարեցվում է որպես ճկուն սյունակ՝ էջում HTML տարրերը տեղադրելու եղանակներից մեկը: Բացի այդ, բոլոր խարիսխի հղման տեքստը տարրերի ներսում nav դասով պետք է լինի սև:

Այժմ, բնիկ CSS-ում, այդ տեսակի բույնը անվավեր կլինի: Որպեսզի այն աշխատի, դուք պետք է ներառեք ամպերի նշանը (&) ներդիր տարրերի առջև, օրինակ՝

.nav {
  & ul { display: flex; }
  & a { color: black; }
}

Այժմ, եթե դուք օգտագործում էիք ընտրիչ, որը սկսվում է խորհրդանիշով (օրինակ՝ դասի ընտրիչ) էջի որոշակի հատվածը թիրախավորելու համար, կարող եք բաց թողնել նշանը: Այսպիսով, հետևյալ շարահյուսությունը կաշխատի ինչպես բնիկ CSS-ում, այնպես էլ Sass-ում.

.nav {
  .nav-list { display: flex; }
  .nav-link { color: black; }
}

Դուք չեք կարող ստեղծել նոր ընտրիչ՝ օգտագործելով «&» Native CSS-ում

Այն հատկանիշներից մեկը, որը դուք հավանաբար սիրում եք Sass-ում, սա նման բան անելու ունակությունն է.

.nav {
  &-list { display: flex; }
  &-link { color: black; }
}

Այս Sass կոդը հավաքվում է հետևյալ չմշակված CSS-ում.

.nav-list {
  display: flex;
}
.nav-link {
  color: black;
}

Մայրենի CSS-ում դուք չեք կարող նոր ընտրիչ ստեղծել՝ օգտագործելով «&»: Sass կոմպիլյատորը փոխարինում է «&»-ը մայր տարրով (օրինակ՝ .nav), սակայն բնիկ CSS-ը «&»-ը և դրանից հետո գտնվող մասը կվերաբերվի որպես երկու առանձին ընտրիչներ։ Արդյունքում կփորձի բարդ ընտրիչ սարքել, որը նույն արդյունքը չի տա։

Այս օրինակը կաշխատի բնիկ CSS-ում, չնայած.

.nav {
  &.nav-list { display: flex; }
  &.nav-link { color: black; }
}

Սա աշխատում է, քանի որ առաջին ընտրիչը նույնն է, ինչ nav.nav-list հասարակ CSS-ում, իսկ երկրորդը նույնն է, ինչ nav.nav-link: «&»-ի և ընտրիչի միջև բացատ ավելացնելը համարժեք կլինի nav .nav-list գրելուն:

Մայրենի CSS-ում, եթե դուք օգտագործում եք ցայտանշանը հետևյալ կերպ.

.nav {
  &__nav-list { display: flex; }
  &__nav-link { color: black; }
}

Դա նույնն է, ինչ գրել սա.

__nav-list.nav {
  display: flex;
}
__nav-link.nav {
  color: black;
}

Սա կարող է ձեզ համար անակնկալ լինել՝ հաշվի առնելով, որ և՛ __nav-list և՛ __nav-link գտնվում են .nav ընտրիչում: Բայց ամպերսանդը իրականում տեղադրում է բնադրված տարրերը մայր տարրի դիմաց:

Հատուկությունը կարող է տարբեր լինել

Մեկ այլ բան, որը պետք է նշել, այն ազդեցությունն է կոնկրետության վրա, որը տեղի է ունենում ոչ թե Sass-ում, այլ տեղի է ունենում բնիկ CSS-ի մեջ:

Այսպիսով, ենթադրենք, դուք ունեք և article>տարր: Հետևյալ CSS-ով այս տարրերից որևէ մեկում

-ը կօգտագործի serif տառատեսակ.

#main, article {
  h2 {
    font-family: serif;
  }
}

Վերոնշյալ Sass կոդի կազմված տարբերակը հետևյալն է.

#main h2,
article h2 {
  font-family: serif;
}

Բայց նույն բնադրման շարահյուսությունը բնիկ CSS-ում կստեղծի այլ արդյունք, արդյունավետորեն նույնը, ինչ.

:is(#main, article) h2 {
  font-family: serif;
}

is() ընտրիչը մշակում է առանձնահատկությունների կանոնները մի փոքր այլ կերպ, քան Sass-ը: Հիմնականում :is()-ի առանձնահատկությունը ավտոմատ կերպով թարմացվում է տրամադրված արգումենտների ցանկի առավել կոնկրետ տարրի:

Տարրերի հերթականությունը կարող է փոխել ընտրված տարրը

Բնադրումը բնիկ CSS-ում կարող է ամբողջությամբ փոխել այն, ինչ իրականում նշանակում է ընտրիչը (այսինքն՝ ընտրում է բոլորովին այլ տարր):

Դիտարկենք հետևյալ HTML-ը, օրինակ.

<div class="dark-theme">
  <div class="call-to-action">
    <div class="heading"> Hello </div>
  </div>
</div>

Եվ հետևյալ CSS-ը.

body { font-size: 5rem; }
.call-to-action .heading {
  .dark-theme & {
    padding: 0.25rem;
    background: hsl(42, 72%, 61%);
    color: #111;
  }
}

Սա արդյունք է, եթե դուք օգտագործում եք Sass-ը որպես CSS կոմպիլյատոր.

Այժմ HTML բլոկում, եթե դուք տեղափոխեիք <div> մութ թեմայի դասի մեջ գործողության կոչի դասի մեջ։ >, դա կխախտի ընտրիչը (Sass ռեժիմում): Բայց երբ դուք անցնում եք սովորական CSS-ի (այսինքն՝ առանց CSS նախապրոցեսորի), ոճերը կշարունակեն աշխատել:

Դա պայմանավորված է նրանով, որ :is()-ը աշխատում է գլխարկի տակ: Այսպիսով, վերևում տեղադրված CSS-ը հավաքվում է հետևյալ պարզ CSS-ի մեջ.

.dark-theme :is(.call-to-action .heading) {
  /* CSS code */
}

Սա նշանակում է .heading, որը և՛ .dark-theme և .call-to-action-ի ժառանգն է: Բայց դրանց հերթականությունը իրականում նշանակություն չունի։ Քանի դեռ .heading-ը .call-to-action և .dark-theme-ի ժառանգն է, այն աշխատում է երկու հաջորդականությամբ:

Սա եզրային դեպք է և ոչ մի բան, որին այդքան հաճախ կբախվեք: Սակայն :is() ընտրիչի հիմքում ընկած ֆունկցիոնալությունը հասկանալը կարող է օգնել ձեզ յուրացնել, թե ինչպես է աշխատում բույնը CSS-ում: Սա նաև շատ ավելի հեշտ է դարձնում ձեր CSS-ի վրիպազերծումը:

Իմացեք, թե ինչպես օգտագործել Sass-ը React-ում

Քանի որ Sass-ը հավաքվում է CSS-ում, դուք կարող եք այն օգտագործել գրեթե ցանկացած UI շրջանակով: Դուք կարող եք տեղադրել CSS նախապրոցեսորը Vue, Preact, Svelte և, իհարկե, React նախագծերում: Այս բոլոր շրջանակների համար Sass-ի տեղադրման գործընթացը նույնպես բավականին պարզ է:

React-ում Sass-ի օգտագործման ամենամեծ առավելությունն այն է, որ այն թույլ է տալիս գրել մաքուր, բազմակի օգտագործման ոճեր՝ օգտագործելով փոփոխականներ և միքսներ: Որպես React ծրագրավորող՝ Sass-ն օգտագործելու իմացությունը կօգնի ձեզ ավելի մաքուր, արդյունավետ կոդ գրել և ընդհանուր առմամբ ձեզ ավելի լավ մշակող դարձնել: