Stylus

Վիքիպեդիայից՝ ազատ հանրագիտարանից
Jump to navigation Jump to search
Stylus
Stylus-logo.svg
Տեսակոճային լեզու և ծրագրավորման լեզու
Առաջացել է2011
ՕՀբազմապլատֆորմ
Ընթացիկ տարբերակ0.54.7 (օգոստոսի 21, 2019)[1]
Ներշնչվել էԿասկադային ոճաթերթ, LESS և Sass
ԱրտոնագիրMIT արտոնագիր[2]
Կայքstylus-lang.com[3]
Աղբյուր կոդgithub.com/stylus/stylus

Stylus, կասկադային ոճաթերթի (CSS) դինամիկ պրեպրոցեսոր։ Այն նախագծվել է՝ ոգեշնչվելով Sass-ից և LESS-ից։ Stylus-ը համարվում է չորրորդ ամենատարածված CSS պրեպրոցեսոր շարահյուսությունը[4]։ Այն ստեղծել է Node.js-ի նախկին ծրագրավորող և ծրագրավորման Luna լեզվի հեղինակ TJ Հոլովայչուկը։ Stylus-ը գրված է JADE և Node.js տեխնոլոգիաներով։

Սելեկտորներ[խմբագրել | խմբագրել կոդը]

Ի տարբերություն կասկադային ոճաթերթի (CSS), որտեղ հայտարարվող բլոկները բացվում և փակվում են փակագծերով, այստեղ օգտագործվում է միայն բացատներ։ CSS-ում կիրառվող կետ-ստորակետը (;) այստեղ կամընտիր է․

body {
    color: white;
}

կարելի է կրճատել․

body 
    color: white

Ավելին, վերջակետը (:) և ստորակետը (,) նույնպես կամընտիր են։ Դա նշանակում է, որ կոդը կարելի է կրճատել մինչև․

body 
    color white

Փոփոխականներ[խմբագրել | խմբագրել կոդը]

Stylus-ը թույլ է տալիս սահմանել փոփոխականներ, սակայն, ի տարբերություն LESS-ի և Sass-ի, չի օգտագործում լրացուցիչ սիմվոլ։ Բացի այդ, փոփոխականը հանձնարարությունն իրականացնում է ավտոմատ՝ առանձնացնելով հատկությունը բանալի բառից։ Այս կերպ փոփոխականները նման են Python-ի փոփոխականներին։

message = 'Hello, World!'

div::before
  content message
  color #ffffff

Stylus կոմպիլյատորն այս փաստաթուղթը կփոխարկի հետևյալի․

div::before {
  content: 'Hello, World!';
  color: #ffffff;
}

Միքսիններ և ֆունկցիաներ[խմբագրել | խմբագրել կոդը]

Միքսինները և ֆունկցիաները սհմանվում են նույն ձևով, սակայն կիրառվում են տարբեր կերպ։

Օրինակ, եթե ցանկանում եք սահմանել CSS-ի border-radius-ի հատկությունը՝ առանց կիրառելով տարբեր դիտարկիչների կոդային նախածանցներ, կարող եք ստեղծել կոդը․

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

այնուհետև այն ներառել որպես միքսին․

div.rectangle 
  border-radius(10px)

որը կփոխարվի հետևյալի․

div.rectangle {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Փաստերին և նույնականացուցիչներին փոփոխականներ ներառելու համար դրանք վերցնում ենք փակագծերի մեջ։ Օրինակ՝

 -webkit-{'border' + '-radius'}

համարժեք է․

-webkit-border-radius

Ծանոթագրություններ[խմբագրել | խմբագրել կոդը]

Արտաքին հղումներ[խմբագրել | խմբագրել կոդը]