Stylus

Stylus, կասկադային ոճաթերթի (CSS) դինամիկ պրեպրոցեսոր։ Այն նախագծվել է՝ ոգեշնչվելով Sass-ից և LESS-ից։ Stylus-ը համարվում է չորրորդ ամենատարածված CSS պրեպրոցեսոր շարահյուսությունը։ Այն ստեղծել է 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

Ծանոթագրություններ

Արտաքին հղումներ 
 
 Stylus source code repository (Git)
 Source code comparison with Sass/SCSS and LESS