Stylus
Stylus, կասկադային ոճաթերթի (CSS) դինամիկ պրեպրոցեսոր։ Այն նախագծվել է՝ ոգեշնչվելով Sass-ից և LESS-ից։ Stylus-ը համարվում է չորրորդ ամենատարածված CSS պրեպրոցեսոր շարահյուսությունը[2]։ Այն ստեղծել է Node.js-ի նախկին ծրագրավորող և ծրագրավորման Luna լեզվի հեղինակ TJ Հոլովայչուկը։ Stylus-ը գրված է JADE և Node.js տեխնոլոգիաներով։
 | |
|---|---|
| Տեսակ | ոճային լեզու, ծրագրավորման լեզու և off-side rule language? |
| Առաջացել է | 2011 |
| Ընդլայնումներ | .styl |
| ՕՀ | բազմապլատֆորմ |
| Ներշնչվել է | Կասկադային ոճաթերթ, LESS և Sass |
| Արտոնագիր | MIT արտոնագիր[1] |
| Կայք | stylus-lang.com(անգլ.) |
| Ելակոդ | github.com/stylus/stylus |
Սելեկտորներ խմբագրել
Ի տարբերություն կասկադային ոճաթերթի (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