LESS

LESS

Տեսակ	ոճային լեզու, ազատ ծրագրային ապահովում, Պրեպրոցեսոր և ծրագրային գրադարան
Առաջացել է	2009
ՕՀ	բազմապլատֆորմ
Ներշնչվել է	Կասկադային ոճաթերթ և Sass
Արտոնագիր	Apache License 2.0
Կայք	lesscss.org
Ելակոդ	github.com/less/less.js

LESS, ոճային դինամիկ լեզու, որը ստեղծել է Alexis Sellier֊ը։ Այն ստեղծվել է ոճային Sass լեզվի ազդեցության արդյունքում և իր հերթին ազդել է «SCSS»-ի վրա, որում օգտագործվող շարահյուսությունը համարվում է CSS լեզվի ընդլայնում։

LESS-ը ազատ ծրագրային ապահովմամբ արտադրանք է։ Նրա առաջին տարբերակը գրվել է Ruby լեզվով, սակայն հետագա տարբերակներում որոշվեց հրաժարվել ծրագրավորման այդ լեզվի կիրառումից և անցում կատարվեց JavaScript-ին։ LESS-ը ներմուծված մետալեզու է։

LESS-ն ապահովում է CSS-ի հետևյալ ընդլայնումները․ փոփոխականներ, ներդրված բլոկներ, միքսիններ, օպերատորներ և ֆունկցիաներ։ LESS-ը կարող է աշխատել կլիենտի կողմից (Internet Explorer 6+, WebKit, Firefox) կամ սերվերում՝ Node.js-ի կամ Rhino-ի կառավարմամբ.

Փոփոխականներ

LESS-ը թույլ է տալիս օգտագործել փոփոխականներ։ Փոփոխականի անունը սկսվում է @ սիմվոլով։ Վերագրման համար օգտագործվում է : սիմվոլը։

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

LESS-ի այս կոդը կկոմպիլացնի հետևյալ CSS ֆայլը․

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Միքսիններ

Միքսինները հնարավորություն են տալիս ներառել հատկությունների մի ամբողջ շարք։

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
   border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

LESS-ի այս կոդը կկոմպիլացնի հետևյալ CSS ֆայլը․

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
   border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
   border-radius: 10px;
}

Ներդրված կանոններ

LESS-ը հնարավորություն է տալիս ներդնել տրամաբանական կասկադավորում, երբ էլեմենտի հատկությունից բացի նրա մեջ կարող են լինել ենթադաս էլեմենտներ՝ իրենց հատկությունով։ Դրա շնորհիվ կրճատվում է կոդի երկարությունը։

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

LESS-ի այս կոդը կկոմպիլացնի հետևյալ CSS ֆայլը․

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Ֆունկցիաներ և գործողություններ

LESS-ը հնարավորություն է տալիս օգտագործել ֆունկցիաներ։ Գործողություրնների շնորհիվ հնարովոր է գումարել, հանել, բաժանել և բազմապատկեր հատկությունները և գույները։ Ֆունկցիաներն ամբողջությամբ արտածում են JavaScript կոդը, որոնք թույլ են տալիս մշակել արժեքները։

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

LESS-ի այս կոդը կկոմպիլացնի հետևյալ CSS ֆայլը․

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

Համեմատությունը CSS-ի այլ ենթապրոցեսորների հետ

Ե՛վ Sass-ը, և՛ LESS-ը CSS-ի ենթապրոցեսորներ են։

LESS-ը ոգեշնչվել է Sass-ից։ Sass-ը նախագծվել է CSS-ի պարզեցման և ընդլայնման համար։ LESS-ը ստեղծվել է CSS-ին հնարավորինս մոտ լինելու համար, ինչի արդյունքում երկուսի շարահյուսությունն էլ նույնն է։ Արդեն գոյություն ունեցող CSS կոդը հնարավոր է օգտագործել LESS-ում։ Sass-ի նոր տարբերակներն էլ են ներառում CSS-ի շարահյուսությունը, որը կոչվում է SCSS (Sassy CSS)։

ZUSS (ZK User-interface Style Sheet)-ը ոճային լեզու է, որը հիմնված է LESS-ի գաղափարների վրա։ Այն ունի նույն շարահյուսությունը՝ մի տարբերությամբ, որ սերվերում այն աշխատում է Java լեզվի կառավարմամբ։ Այն չի օգտագործվում JavaScript (Rhino) ինտերպրետատոր, սակայն թույլ է տալիս միանգամից կանչել Java մեթոդներ։

Օգտագործում

LESS-ը հնարավոր է օգտագործել կայքերում տարբեր եղանակներով։ Տարբերակներից մեկը վեբ էջի կցումն է less.js JavaScript ֆայլին։

Այն կատարվում է, օրինակ, հետևյալ html կոդի միջոցով․

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Եթե օգտագործում եք սերվերային JavaScript: Rhino կամ node.js, ապա սերվերի կողմից կարող եք փոխակերպել .less ֆայլը .css-ի։

Ի վերջո, գոյություն ունի լեզվի կողմնակի իրացում․ Օրինակ, SimpLESS open source կոմպիլյատորը Windows, Linux և Mac OS X համակարգերի համար, .less{} իրացում .NET framework-ի համար կամ lessphp, որը թույլ է տալիս սերվերում կոմպիլացնել less ոճը PHP կայքերի համար։

Գրականություն

• Alex Libby, Instant LESS CSS Preprocessor How-to
• Antony Kennedy, Inayaili de Leon, Ch. 9. Dynamic CSS → LESS
• An Introduction To LESS, And Comparison To Sass, Jeremy Hixon
• Jeremy Foster, App. A. CSS Libraries and Resources → LESS

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

• Պաշտոնական կայք
• LESS նախագիծը GitHub-ում