Բովանդակություն
CSS վետերանի առաջին անգամ Sass- ի հայտնաբերումը դիտելը միշտ զվարճալի է: Բնադրման, փոփոխականների և խառնուրդների նման հասկացություններն այնքան բնական են թվում, և շարահյուսությունը հավատարիմ մնալուն, դժվար է հիշել դրանց մատչելիությունից առաջ ժամանակ: Ռելիեֆը ամենատարածված հույզն է. Ճանաչում, որ անցել են տասնվեցական արժեքները ձեռքով նախածանցման և պատճենման օրերը:
Նախընտրական պրոցեսորում @extend- ում հայտնաբերված հիմնական հասկացություններից առանձնանում է երեք պատճառով. Այն ունի առավելագույն ներուժ ՝ ձեր աշխատանքային հոսքը կտրուկ փոխելու համար: չարաշահումը վտանգավոր է ձեր ոճի թերթի առողջության համար. և եկվորները շատ ավելի շատ են պայքարում դրա դեմ, քան Sass- ի մյուս ֆունկցիոնալությունները: Հետևեք ուղեկցող նմուշներին ՝ @ ընդլայնելու անվտանգ օգտագործումը սկսելու համար:
- Ներբեռնեք այս ձեռնարկի աղբյուրը
Ավելացնելով երկարացնել
Երբ երկու ընտրողներ ստանդարտ CSS- ում կիսում են ոճերը, հարաբերությունները ներկայացվում են ցուցակում `բաժանված ստորակետերով.
.sidebar, .notice {margin: 20px; }}
Sass- ը համատեղում է ընտրողներին @extend հրահանգի հետ.
.sidebar {margin: 20px; }. ծանուցում {@ ընդլայնել .sidebar; }}
Դա կարող է փոքր մասշտաբով անարդյունավետ թվալ, բայց կախարդանքը կայանում է ձեր ոճաթերթի ցանկացած վայրից այդ հարաբերությունները ստեղծելու ունակության մեջ: Ընտրողի ցանկացած քանակ (կամ տեսակ) կարող է ընդլայնել .sidebar- ում հայտնաբերված ոճերը: Սա ստեղծում է հատկությունները թարմացնելու մի տեղ, առանց ձեզ ստիպելու ձեռքով միավորել ընտրողներին: Եկեք նայենք ավելի տարածված օրինաչափությանը: Այս շատ պարզ օրինակը ցույց է տալիս, թե ինչպես ստեղծել ընդհանուր կոճակի դաս և ավելացնել լրացուցիչ դասեր բազային հատկությունները փոփոխելու համար.
.btn {font-weight: bold; } .btn- սխալ {background: red; } .btn-next {ֆոն `կանաչ; }
Փոխանակ մեր HTML- ում .btn և .btn սխալի դասերը ներառելուն, երբ կարմիր կոճակ է պահանջվում, հիմնական կոճակի ոճերը տարածեք սխալի վիճակում.
.btn- սխալ {@extend .btn; ֆոն `կարմիր; }
Այժմ, երբ մեր Sass- ը կազմում է, .btn ընտրիչը դառնում է .btn, .btn- սխալ: Theուցակը ավտոմատ կերպով պահպանվում է, և պարզապես .btn- սխալի տարրին ավելացնելը կիրառում է բոլոր անհրաժեշտ ոճավորումները:
Ընդլայնել որոգայթները
Բնադրելու նման, @extend հրահանգը կարող է խնդիրներ առաջացնել, եթե օգտագործվի անպատասխանատու կերպով կամ առանց հասկանալու արդյունքում ստացված կապերը:
Շարունակելով կոճակների օրինակը, եկեք ձեւացնենք, որ .btn ներսում երկարացրել ենք .btn- հաջորդը, ինչպես արեցինք .btn- սխալի հետ: Ի վերջո, մենք պետք է շտկենք բազային կոճակը, երբ այն հայտնվի ձևի մեջ:
ձև .btn {սահման-շառավիղ: 5px; }
Սովորաբար, սա վավեր ոճի կսմթել է: Այնուամենայնիվ, .btn երկարացնող այլ ընտրողները բերվում են հավասարմանը, երբ հայտնվի .btn.
ձև .btn, ձև .btn- սխալ, ձև .btn- հաջորդ {սահման-շառավիղ: 5px; }
Որոշ դեպքերում դուք կցանկանաք, որ այստեղ ներառվի այն ամենը, ինչ տարածվում է .btn- ի վրա, ինչը փոքր մասշտաբի մեծ բան չէ: Այնուամենայնիվ, եթե մեկ տասնյակ դասեր երկարացրեցին բազային կոճակը, և մեզ պետք չեկավ արդյունքում առաջացած լայնաշղթան, մենք կանգնում ենք փքվածության առաջ: Միջինից մեծ ծրագրերում, անուղղակի տարածված տարածքները կարող են հեշտությամբ լուծել ձեր ֆայլի չափը լրացուցիչ 30% կամ ավելի: Սա կարող է լուրջ խնդիր դառնալ, երբ զուգորդվում է վատ բնադրման հետ:
Տեղապահի ընտրողներ
Տեղապահի ընտրողները ներկայացվել են Sass 3.2-ում և առաջարկում են երկարաձգվող որսալ, որն ինքնուրույն չի կազմվի ընտրողի մոտ: Կիրառեք տեղապահի ընտրիչ `լուծելու անհարկի @ ընդարձակ ընտրողների խմբերը.
% sidebar {margin: 20px; }. ծանուցում {@ ընդլայնել% sidebar; }
% Խորհրդանիշը նշանակում է տեղապահի ընտրիչ և փոփոխում է միայն կազմված ոճերը, երբ ինչ-որ բան այն ընդլայնում է: Հետադարձ հայացք նետելով մեր կոճակի օրինակին ՝ փորձեք հեռացնել բնօրինակ ընդլայնումները և փոխարենը օգտագործել տեղապահի ընտրիչ:
.btn,% btn {font-weight: bold; } .btn- սխալ {@extend% btn; ֆոն `կարմիր; } .btn- հաջորդը {@extend% btn; ֆոն `կանաչ; }
Տեղապահի ընտրիչի ավելացման հետ մեկտեղ մեր երկու փոփոխիչների դասերը ընդլայնում են տեղապահը .btn ընտրիչի փոխարեն: Սա թույլ է տալիս վերստին օգտագործել (և scoping) հատկությունները .btn առանց փչելու: Եթե մեզ հարկ չլիներ ինքնուրույն օգտագործել .btn ընտրիչ, ապա այստեղ կարող էր օգտագործվել միայն տեղապահը:
ձև .btn {սահման-շառավիղ: 5px; }
Այժմ .btn- ի տեղադրված փոփոխությունը կազմվում է պարզապես .btn- ի ձևավորման համար, և մենք վերացրել ենք փքվածության հավանական սպառնալիքը:
Միշտ ստուգեք կազմված ոճաթերթերը `ընտրող երկար շղթաների և ընդլայնումների համար, որոնք սխալ են: Ասվածն ասած, փորձեք փորձեր կատարել @extend, nesting և placeholder ընտրողների հետ: Այն ամբողջությամբ ընկալելու համար կպահանջվի որոշ փորձ և սխալ, բայց թույլ է տալիս իսկապես ուշագրավ կառուցվածքներ:
Բառեր Նիկ Ուոլշ
Այս հոդվածն ի սկզբանե հայտնվել է զուտ ամսագրի 239 համարում
