Stylus

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

Stylus

Տեսակ	ոճային լեզու, ծրագրավորման լեզու և 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

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

1. https://github.com/LearnBoost/stylus/blob/master/LICENSE
2. Poll Results: Popularity of CSS Preprocessors

Արտաքին հղումներ

• Պաշտոնական կայք
• Stylus source code repository (Git)
• Source code comparison with Sass/SCSS and LESS