LESS

Վիքիպեդիայից՝ ազատ հանրագիտարանից
Jump to navigation Jump to search
LESS
LESS Logo.svg
Տեսակ ոճային լեզու, ազատ ծրագրային ապահովում, Պրեպրոցեսոր և ծրագրավորման լեզու
Առաջացել է 2009
ՕՀ բազմապլատֆորմ
Ներշնչվել է Կասկադային ոճաթերթ և Sass
Արտոնագիր Apache License 2.0[1]
Կայք lesscss.org[2]
Աղբյուր կոդ github.com/less/less.js

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

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

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

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

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

@color: #4D926F;

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

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

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

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

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

.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-ը հնարավորություն է տալիս ներդնել տրամաբանական կասկադավորում, երբ էլեմենտի հատկությունից բացի նրա մեջ կարող են լինել ենթադաս էլեմենտներ՝ իրենց հատկությունով։ Դրա շնորհիվ կրճատվում է կոդի երկարությունը[4]։

#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-ի ենթապրոցեսորներ են[5]։

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

ZUSS (ZK User-interface Style Sheet)-ը[8] ոճային լեզու է, որը հիմնված է 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 համակարգերի համար[9], .less{} իրացում .NET framework-ի համար[10] կամ lessphp[11], որը թույլ է տալիս սերվերում կոմպիլացնել less ոճը PHP կայքերի համար։

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

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

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