Բովանդակություն
- 01. Պատկերները համապատասխանեցրեք կայքի գունային սխեմաներին
- 02. Evenանցի վերջին շարքում հավասարաչափ տարածեք տարածությունը
- 03. Ստեղծել մասնիկների անիմացիան տուփ-ստվերով
- 04. Վերափոխումներով կենդանացնել բազմանդամները
- 05. Master 'calc () ’դիրքավորելու համար
- 06. Տուփի մոդելը դարձնել մեղմ ՝ «տուփի չափսերով»
- 07. Ուղղահայաց կենտրոն ՝ CSS- ով
- 08. Թիրախավորված հարակից օբյեկտների բանկ
- 09. Վերահսկիչ գծիկ
- 10. Օգտվեք ռեժիմներ գրելուց
- 11. Գրադիենտներն օգտագործեք անսովոր ձևերով
- 12. Օգտագործեք string-Matching- ը հղումների վրա
- 13. Ստիպեք FOUT- ին աշխատել ձեզ համար
- 14. Հետազոտեք SVG- ը հետին պլանների համար
- 15. Կենտրոնացրեք 3D անցումներով օգտվողներին
- 16. Ստեղծեք շրջանաձեւ ընտրացանկեր CSS- ով և մաթեմատիկայով
- 17. Կենդանի մնալ հղումները սավառնելիս
- 18. Կատարել պարզ keyframe անիմացիաներ
- 19. Ստեղծեք ստվերով լողացող 3D էֆեկտներ
- 20. Թարմացրեք էջի տարրերը ՝ օգտագործելով ': target'
- 21. Հետադարձ կապ տրամադրեք նուրբ անիմացիաներով
- 22. Պատրաստվեք «կամքի-կենդանացման»
- 23. Մարդկության ներմուծման դաշտերը
- 24. Դադար և խաղալ CSS անիմացիաներ
- 25. Մի օգտագործեք CSS փոփոխականներ
Technologyանկացած պահի `ցանկացած տեխնոլոգիայի հետ, կա զգացողություն, որ գրեթե ամեն ինչ, ինչ հնարավոր է անել, արվել է: Երբ ինչ-որ բան այլևս այնքան նոր և փայլուն չէ, հետաքրքրությունը թուլանում է, և ուշադրությունը հրավիրվում է հաջորդ մեծ բանի վրա: Դա հաճախ է պատահել համացանցային արդյունաբերության մեջ, որը հակված է սարսափելի հուզվել տեխնոլոգիայի որոշակի ասպեկտով `նախքան, վաղ թե ուշ, այն աշխարհիկ աշխարհ տեղափոխելը:
Երբ CSS- ն առաջին անգամ հայտնվեց, այն հեղափոխական էր, և ժամանակի ընթացքում այն զարգացավ ՝ դիզայներներին հնարավորություն տալով ստեղծել ճկուն, սերտորեն մշակված և գեղեցիկ վեբ էջերի դասավորություններ: Սակայն ուշ շրջանից տարբեր շրջաններից առաջարկ եղավ, որ CSS- ն հոգնած է, և երևի արևի ժամանակն անցել է:
Ես ուզում եմ ցույց տալ, որ CSS աշխարհում դեռ շատ ոգևորություն և կյանք կա ՝ անկախ նրանից դա գերխնդիր հատկությունների մեջ է, որոնք դուք գուցե դեռ չեք ուսումնասիրել, կամ CSS ասպեկտ օգտագործելու միջոցով, որը նախկինում չէիք համարում:
Ահա որոշ խորհուրդներ ոլորտի CSS լավագույն մասնագետներից:
(Նշում. Այս հատկության որոշ մեթոդներ ծայրահեղ են և կարող են ամբողջությամբ չաջակցվել բոլոր դիտարկիչներում: Մանրակրկիտ ստուգեք և համոզվեք, որ հետևյալները կան ՝ նախքան որևէ աշխատանք կենդանի դարձնելը)
01. Պատկերները համապատասխանեցրեք կայքի գունային սխեմաներին
Քրիստոֆեր Շմիթ, գիտաժողովի կազմակերպիչ
Համաժողովներն ունեն իրենց գունային սխեմաները, և շատ բանախոսներով, դիմանկարները կառավարելու համար աշխատանքային գործընթացը կարող է բարդ լինել: Ձեռքով զտիչները կիրառելը չի մասշտաբավորվում և հիմնվում է այն բանի վրա, որ դուք կունենաք, ասենք, հատուկ Photoshop գործողություն: Այժմ ես օգտագործում եմ բարձր ռեզերվային մոխրագույն PNG- ներ և տոննա ավելացնում ՝ օգտագործելով CSS ֆիլտրեր: Սա ինձ հնարավորություն է տալիս ցանկացած դիմանկարը համապատասխանեցնել իրադարձության սխեմայի հետ, ինչպես նաև բազմիցս օգտագործել թեմաները: Ուղղակի յուրաքանչյուրի համար ինձ նոր CSS կանոն է պետք: Տեսեք ցուցադրություն:
02. Evenանցի վերջին շարքում հավասարաչափ տարածեք տարածությունը
Սթիվեն Հեյ, դիզայներ և հեղինակ
Եթե ցանցում ցուցադրվող անհայտ թվով իրեր ունեք, կարող եք օգտագործել Flexbox- ը ՝ վերջին շարքը հավասարապես բաժանելու համար: Այսպիսով, եթե կա միայն մեկ տարր, այն կզբաղեցնի ամբողջ շարքը. եթե կա երկու կետ, շարքը կբաժանվի կիսով չափ և այլն: Տեսեք ցուցադրություն:
03. Ստեղծել մասնիկների անիմացիան տուփ-ստվերով
Անա Թուդորը, կոդավորող և մաթեմատիկական մոլեռանդ
Խառնելով տուփ-ստվեր որոշ մաթեմատիկայի և Sass- ի միջոցով կարող ես գծանշել 2D կորեր, ընդօրինակել 3D շարժումը և ստեղծել խենթ մասնիկների անիմացիաներ, որոնք բոլորը սխալվելու են կտավի համար: Տեսեք ցուցադրություն և մեկ այլ:
04. Վերափոխումներով կենդանացնել բազմանդամները
Անա Թուդորը, կոդավորող և մաթեմատիկական մոլեռանդ
Դուք հավանաբար տեսել եք մաքուր CSS պոլիգոններ, որոնք ստեղծվել են սահմաններով, բայց մենք դրա մեջ շատ ավելի հզոր գործիք ունենք վերափոխել սեփականություն Բնադրված տարրերի վրա փոխակերպումների շղթայումը և կիրառումը թույլ են տալիս ստեղծել բարդ բազմանկյուններ պատկերի ֆոններով կամ եզրագծերով և թափանցիկ ինտերիերով: Օգտագործելով 3D փոխակերպումներ, մենք կարող ենք այս 2D ձևերը համադրել պոլիէդրաների մեջ և պինդ մարմինները միաձուլել, զարգանալ, պայթել կամ վերամիավորել այնպես, ինչպես հեշտությամբ սխալվում է WebGL- ի հետ: Տեսեք ցուցադրություն:
05. Master 'calc () ’դիրքավորելու համար
Անա Թուդորը, կոդավորող և մաթեմատիկական մոլեռանդ
ես սիրում էի հաշվ () այն հայտնաբերելու պահից: Այն օգտակար է լուսանցքները, լիցքավորումը կամ չափերը մեղմելու համար, և կարող է փրկարար լինել, երբ այն օգտագործվում է ֆոնային դիրքի կամ չափսերի համար, գրադիենտների կամ վերափոխումների ներսում, և զուգորդվում է ոչ միայն նույն հին միավորների, այլև նոր և զով տեսադաշտի հետ:
06. Տուփի մոդելը դարձնել մեղմ ՝ «տուփի չափսերով»
Սոյեր Հոլլենսհեդ, Oak Studios- ի արտադրող և դիզայներ
Օգտագործել տուփի չափսեր խելամտությունը փրկելու համար: Առանց դրա, 250px և 25px լցոնների սահմանված լայնությամբ տարրը զուգորդվում է 300px լայնության վրա `խստացնելով խառնման պիքսելներն ու տոկոսները: Հետ տուփի չափսեր.սահման-արկղ սահմաններն ու լցոնումը փոխարենը դրվում են սահմանված լայնության մեջ:
07. Ուղղահայաց կենտրոն ՝ CSS- ով
Պարենտի հիմնադիր Թրենտ Ուոլթոն
Պատմականորեն դժվար էր ուղղահայաց CSS- ով ինչ-որ բան կենտրոնացնելը, օրինակ `եթե ունեք հարակից տեքստով պատկեր, որը ցանկանում եք ուղղահայաց դասավորված լինել: Ստիպելու և հայհոյելու փոխարեն օգտագործեք Flexbox ՝ հավասարեցման խնդիրներից գլուխ հանելու համար: Տեսեք ցուցադրություն:
08. Թիրախավորված հարակից օբյեկտների բանկ
Jonոնաթան Սմայլին, Zurb- ի գործընկերը և դիզայնի առաջատարը
Սափրեք CSS տողի քաշը ՝ օգտագործելով հատկությունների մոտավոր ընտրիչներ դասի անվանումների վրա ՝ հարակից օբյեկտների մեծ բանկ թիրախավորելու համար, այլ ոչ թե յուրաքանչյուր դասին ընդհանուր հատկանիշներ կցելով: Օրինակ ... [class * = "- block-grid-"] {} ... ուղղված կլիներ հետևյալներին ՝ .small-block-grid-3 .large-block-grid-5
09. Վերահսկիչ գծիկ
Savid Storey, բաց վեբ փաստաբան
Գծագիր գծերը տպված են որպես տրված, և որոշ մշակողներ օգտագործում են այն գծիկներ գույքը առցանց, բայց քչերն են տեղյակ այլ հատկությունների մասին, որոնք ավելի լավ վերահսկողություն են ապահովում: Եթե զգույշ չլինեք, կստանաք գծանցման սանդուղքներ, որտեղ գծիկները օգտագործվում են բազմաթիվ գծերի միջով: Ընդհանուր կանոնը անընդմեջ երկուից ավելին չէ, որը կարող եք վերահսկել ՝ օգտագործելով գծիկ-սահմանային գծեր, Նաև, գծիկ-սահմանաչափեր հնարավորություն է տալիս նշել գծի գծանշման նվազագույն երկարությունը, գծագրի ընդմիջումից առաջ և հետո գծերի նվազագույն քանակի հետ միասին:
10. Օգտվեք ռեժիմներ գրելուց
Դեյվիդ Սթորի, բաց վեբ փաստաբան
Գրելու ռեժիմները հնարավորություն են տալիս սահմանել տեքստի հոսքի ուղղությունը: Արևելյան Ասիայի որոշ տեքստեր գրված են ուղղահայաց, գծերն աճում են աջից ձախ, նշված են դրանով գրելու ռեժիմ ՝ ուղղահայաց – rl (tb-rl IE- ում): Ուղղահայաց տեքստը իսկապես չի օգտագործվում գրավոր եվրոպական համակարգերում, բայց այն կարող է օգտակար լինել սեղանի վերնագրերի համար, երբ դուք սահմանափակեք հորիզոնական տարածքը:
11. Գրադիենտներն օգտագործեք անսովոր ձևերով
Ռութ Johnոն, դիզայներ
Ֆոնային գրադիենտները կարող են հիանալի տեսք ունենալ, երբ դրանք օգտագործվում են եզրագծերի և փամփուշտների հետ: Ես օգտագործում եմ և՛ իմ բլոգում, և՛ նախնական մշակողի հետ կարող եմ զանգահարել վերամշակված կոդով միքսին, որպեսզի այն ձեռքով չկրկնվի: Մի գնացեք գերհիասքանչ, քանի որ գրադիենտները կարող են ծանրաբեռնված լինել պրոցեսորով: SCSS խառնուրդ ցուցակի փամփուշտների համար.
@mixin gradedBullet ($ գույն) {background-image: linear-gradient (ձախ, լուսավորել ($ գույն, 15%) 10px, $ գույն 11px, $ գույն 20px, մթնել ($ գույն, 15%) 21px, մթնել ($ գույն , 15%) 30px, թափանցիկ 31px); }
12. Օգտագործեք string-Matching- ը հղումների վրա
Ռութ Johnոն, դիզայներ
Իմ բլոգում ես օգտագործել եմ CSS հատկանիշների ընտրիչներ ՝ լարերի համապատասխանությամբ, սոցիալական պատկերակները ոճավորելու համար: Դրանք հայտնվում են իմ ամբողջ բլոգում ՝ մերթ տեքստով, և երբեմն առանց, բայց միշտ պատկերակով: Linkիշտ սոցիալական պատկերակի հետ ճիշտ հղումը ոճավորելու համար ես օգտագործում եմ լարային համընկնում href խարիսխի տարրի հատկանիշ: ես օգտագործում եմ *= այնպես որ href խարիսխի տարրի վրա միայն պետք է պարունակի իմ կողմից նշված տողը:
/ * բոլոր սոցիալական հղումների համար * / .սոցիալական a: նախքան {display: inline-block; լրացնելով աջ ՝ 30px; font-family: 'FontAwesome';} / * Յուրաքանչյուր հատուկ հղում * /. սոցիալական a [href * = "twitter"]: նախքան {content: " f099"; գույնը ՝ # 52ae9f;} .սոցիալական a [href * = "github"]: նախքան {բովանդակությունը ՝ " f09b"; գույնը ՝ # 5f2e44;} .սոցիալական ա [href * = "լրահոս"] ՝ նախքան {բովանդակությունը ՝ " f09e"; գույնը `# b47742;}
13. Ստիպեք FOUT- ին աշխատել ձեզ համար
Jason Pamental, H + W դիզայնի տնօրեն
Webանցը կառուցված է այն նախադրյալի վրա, որը պետք է բովանդակություն հաղորդի, նույնիսկ եթե զննարկիչը չկարողանա մատնանշել: Դանդաղ բեռնվող վեբ տառատեսակները կարող են հիասթափեցնող լինել, FOUT- ը (չճշտված տեքստի ֆլեշ) տհաճ է, քանի որ տառատեսակները ներբեռնելու ժամանակ նավիգացիան և տեքստը կրկին հոսում են: Google- ը և Typekit- ը տալիս են պատասխան. Վեբ տառատեսակների բեռնիչ: Ներդրելով էջում դասեր ՝ տառատեսակների բեռնման կարգավիճակի հիման վրա, կարող եք այդ դասերի հետ համեմատել հետևյալները ՝ հոսքը նվազագույնի հասցնելու համար ՝ արմատախիլ անելով նաև WebKit- ի «անտեսանելի բովանդակության» համախտանիշը: Տեսեք ցուցադրություն:
14. Հետազոտեք SVG- ը հետին պլանների համար
Էմիլ Բյորկլունդ, inUse վեբ մշակող
Միակ զննարկիչները, որոնք այժմ չունեն SVG աջակցություն, IE8 և ներքև են, և Android 2 WebKit, և այդպիսով SVG- ի ֆոնային համար SVG օգտագործելը իրագործելի է, հատկապես PNG հետադարձ լուծման հետ միասին, ինչպիսին է Grunticon- ը: SVG- ն կարող է ոճավորվել CSS- ի միջոցով, և կա SVG- ից CSS հատկությունների (ֆիլտրեր) հետաքրքիր արյունահոսություն, որոնց հետ մենք կարող ենք խաղալ, ինչպես կիրառվում է HTML- ի վրա:
15. Կենտրոնացրեք 3D անցումներով օգտվողներին
Էմիլ Բյորկլունդ, inUse վեբ մշակող
Օգտագործելով 3D փոխակերպումներ և օգտվելով դրանցից z- հարթություն օգտագործողի միջերեսներում կարող է իսկապես օգտակար լինել, մասնավորապես բովանդակությունը թաքցնելու / ցուցադրելու կամ փլուզելու / ընդլայնելու համար: Նաև բավականին հեշտ է այդ իրավիճակներում վերադառնալ դեպի 2D անցում կամ ընդհանրապես չանցնել: Դա մի ոլորտ է, որտեղ մի փոքր առաջադեմ կատարելագործումը կարող է շատ առաջ տանել:
16. Ստեղծեք շրջանաձեւ ընտրացանկեր CSS- ով և մաթեմատիկայով
Sara Soueidan, առաջատար նախագծող
Շրջանաձև ընտրացանկերը տարածված են բջջային հավելվածներում, և դուք կարող եք օգտագործել CSS փոխակերպումներ և անցումներ ՝ պարզ շրջանաձեւ ընտրացանկ ստեղծելու համար: Այս ընտրացանկը կարող է փոփոխվել և հարմարեցվել ՝ վեր կամ վար բացվող ընտրացանկ ստեղծելու համար: CSS- ում իրը diagonally թարգմանելու ուղի չկա, բայց կարող եք օգտագործել օղակի շառավղի արժեքը, որի վրա ցանկանում եք տեղադրել տարրերը, և կիրառել պարզ մաթեմատիկական կանոն ՝ հորիզոնական և ուղղահայաց թարգմանության արժեքները հաշվարկելու համար թարգմանել X () և թարգմանելY () գործառույթներ Այսպիսով, դուք կավարտեք a անկյունագծային թարգմանություն ՝ ընտրացանկի տարրերը շրջանագծի ճիշտ դիրքեր տեղափոխելու համար: Clickաշացանկը փակող / բացող կտտոցի իրադարձությունը հնարավոր է կարգավորել ՝ օգտագործելով JavaScript- ը, կամ կարող եք այն մեկ քայլ առաջ տանել և ունենալ միայն CSS ընտրացանկ ՝ օգտագործելով CSS տուփի կոտրում: Իմ ցուցադրության ժամանակ ես օգտագործում եմ JavaScript- ը և HTML5 classList API- ն, որոնք բոլոր զննարկիչներում չեն աջակցվում, այնպես որ դրա գործարկման համար հարկավոր է դիտել ցուցադրությունը ժամանակակից զննարկչում կամ jQuery կոդն անջատել ՝ classList API- ի օգտագործման փոխարեն: ծածկագիր
Տեսեք ցուցադրություն և ամբողջական ձեռնարկ: CSS Checkbox կոտրելու օրինակ:
17. Կենդանի մնալ հղումները սավառնելիս
Փոլ Լլոյդ, The Guardian- ի փոխազդեցության դիզայներ
Հովերի նահանգները չպետք է ապավինեն ՝ գործողություն կատարելու կամ կարևոր տեղեկատվություն տրամադրելու համար, բայց միևնույն է, կարող եք ընդլայնել ինտերֆեյսերը մկնիկի վրա հիմնված օգտագործողների համար: 24ways.org կայքում մենք բացահայտում ենք հոդվածների վերնագրերը, երբ սավառնում եք նախորդ / հաջորդ նավիգացիայի հղումների վրա: Դա ձեռք է բերվել ՝ ստեղծելով ա :: հետո գեներացված բովանդակություն պարունակող կեղծ-տարր ՝ a- ի արժեքից ստացված տվյալներ- ատրիբուտը, որը կիրառվում է CSS անցում կատարելու համար, որպեսզի այն դիտվի սավառնելիս: Տեսեք ցուցադրություն:
18. Կատարել պարզ keyframe անիմացիաներ
Փոլ Լլոյդ, The Guardian- ի փոխազդեցության դիզայներ
24ways.org կայքում մենք ամփոփագրերին ավելացրեցինք անիմացիոն անկյունային փեղկեր, որոնք բացվեցին սավառնելիս: Դա արվեց `համատեղելով @keyframes կանոն անիմացիայի հատկության հետ ՝ փոխելով ֆոնային պատկերի դիրքը սպրիտի վրա հիմնված անիմացիայի հասնելու համար: Խաբեությունն այն է, որ հայտարարեք ձեր անիմացիայի sprite- ում ձեր ունեցած շրջանակների քանակի հետ քայլեր () արժեք Տեսեք ցուցադրություն:
19. Ստեղծեք ստվերով լողացող 3D էֆեկտներ
Քեթրին Ֆարման, Happy Cog մշակող
Վերջերս կատարված նախագիծը պահանջում էր լողացող ապրանքի լուսանկար, որի ներքևում կլոր ստվեր կար ՝ ստեղծելով էկրանից դուրս գալու 3D էֆեկտ: Ստվերն օգտագործում է CSS3 մի քանի առանձնահատկություններ. սահման-շառավիղ ալֆայի թափանցիկությունը և տուփ-ստվեր, Այն լավ է աշխատում ապրանքի ցանցերի, գլխավոր էջի հերոսի պատկերների ցուցադրության կամ ցանկացած քմահաճ դիզայնի համար, որը ունի ճեղքվածքային ձև: Տեսեք ցուցադրություն:
20. Թարմացրեք էջի տարրերը ՝ օգտագործելով ': target'
Simon Madine, HeRe ավագ վեբ մշակող
CSS- ը սովորական իմաստով ծրագրավորման լեզու չէ, բայց դուք դեռ կարող եք խելացի բաներ անել ՝ չվերադառնալով JavaScript- ին: Օրինակ : թիրախ կեղծ դասը կիրառվում է այն կտորների վրա, որոնք սեղմված հղման թիրախ են:
Սա կարող եք օգտագործել էջի վիճակը սահմանելու, բազմաթիվ տարրեր պարունակող ծնողի վրա թիրախավորելու համար, և ձեր հղումները դառնում են միջոց ՝ մեկ հպումով բոլոր երեխաների տեսքը և դասավորությունը վերահսկելու համար: Տեսեք ցուցադրություն:
21. Հետադարձ կապ տրամադրեք նուրբ անիմացիաներով
Նիլ Ռենիկեր, դիզայներ և մշակող
CSS կեղծ տարրեր ::նախքան և :: հետո CSS անցումներին զուգընթաց, կարող է թույլ տալ հաճելի անիմացիա, որը նուրբ հետադարձ կապ է ապահովում մկնիկի օգտվողների հետ: Օրինակ, կառուցեք CSS սլաք կեղծ-տարրի շրջանակներում, անցում կատարեք կեղծ տարրին (անցում. բոլոր 15-ականների անկաշկանդությունը;), ապա ավելացնել դասավորության պարզ փոփոխություն դեպի :սավառնել կեղծ դասարան (օրինակ ՝ փոփոխություններ կատարելը) լուսանցք) Տեսեք ցուցադրություն:
22. Պատրաստվեք «կամքի-կենդանացման»
Փոլ Լյուիսը, կոդավորող և Chrome մշակողների հետ կապերի թիմի անդամ
Եթե դուք օգտագործել եք -webkit-transform: translateZ (0) ձեր էջերը կախարդական կերպով ավելի արագ դարձնելու համար, կոտրումը, որը շատ զննարկիչներում պարզապես ստեղծում է նոր կոմպոզիտորական շերտ, փոխարինվում է կամք-կենդանացնել, Շուտով դուք կկարողանաք զննարկիչին ասել, թե ինչ եք նախատեսում փոխել տարրի վերաբերյալ (դրա դիրքը, չափը, պարունակությունը կամ ոլորման դիրքը), և զննարկիչը կկիրառի ճիշտ օպտիմալացումը կափարիչի տակ: Լրացուցիչ տեղեկություններ
23. Մարդկության ներմուծման դաշտերը
Յարոն Շոեն, Made For Humans- ի հիմնադիր
Արագ անիմացիաներ ավելացնելով այն տարրերին, որոնց հետ օգտվողները համագործակցում են, ինտերֆեյսը ավելի համակարգչային է թվում: Մուտքագրման դաշտերով փորձեք տեղադրել անցումային զանգ ներսում, այնպես որ, երբ դուք կենտրոնանաք կամ շեղեք այն, տեղի է ունենում սահուն անցում:
մուտքագրում, տեքստային տարածք {-moz- անցում. բոլոր 0.2-ները հեշտությամբ դուրս են գալիս; -o- անցում. բոլոր 0.2-ները հեշտությամբ դուրս են գալիս; -վեբկիտ-անցում. բոլոր 0.2-ները հեշտանում են; -ms- անցում. բոլոր 0.2-ները հեշտացնում են; անցում. բոլոր 0.2-ները հեշտացնում են;
24. Դադար և խաղալ CSS անիմացիաներ
Val Head, դիզայներ և խորհրդատու
Կարող եք «դադար» տալ և «խաղալ» CSS անիմացիան ՝ փոխելով այն անիմացիա-խաղ-պետություն սեփականություն Այն «դադարի» վրա դնելը դադարեցնում է ձեր անիմացիան տեղում, մինչև որ փոխեք անիմացիա-խաղ-պետություն դեպի վազում, օրինակ ՝ սավառնելու վրա:
.այնացման_մինչ բաներ {անիմացիա. վազել 10-ները գծային անվերջ; անիմացիա-խաղ-վիճակ. դադար. } animating_othing: hover {animation-play-state: վազում; }
25. Մի օգտագործեք CSS փոփոխականներ
Դեյվ Շի, դիզայներ և հեղինակ
Վերջապես, մենք ստանում ենք CSS փոփոխականներ, օրինակ ՝ մեկ անգամ գունավոր վեցանկյուն արժեք գրելու և այն ձևաթղթի միջոցով հղելու համար: Բայց պաշտոնական ակնարկը խոսուն է, ավելացնում է շարահյուսական բարդություն, առաջարկում է ճնշող գործառույթ և հիմնականում չի աջակցվում զննարկիչների մեծամասնության կողմից: Դարաշրջանում, երբ Sass- ը լայն տարածում ունի և դուրս է գալիս փոփոխական փոփոխական ծրագրային հզոր տրամաբանությունից, ինչպիսին են մաքսային գործառույթները և եթե այլ հայտարարություններ, պաշտոնական բնութագիրը շատ կարճ է:
Հուսով եմ, այս լավագույն խորհուրդները նորացրել են CSS- ի ձեր տեսակետը և այն հնարավորությունները, որոնք նրանք ներկայացնում են վեբ մշակման և ձևավորման գործընթացում: Մի մոռացեք մանրազնին փորձարկել այս տեխնիկայից որևէ մեկը ՝ ստուգելու զննարկչի աջակցությունը նախքան որևէ աշխատանք կենդանի դնելը:
Բառեր Քրեյգ Գրաննել Նկարազարդում: Մայք Չիպպերֆիլդ
Այս հոդվածն ի սկզբանե հայտնվել է զուտ ամսագրի 253 համարում:
