LESS
![]() | |
---|---|
Տեսակ | ոճային լեզու, ազատ ծրագրային ապահովում, Պրեպրոցեսոր և ծրագրային գրադարան |
Առաջացել է | 2009 |
ՕՀ | բազմապլատֆորմ |
Ներշնչվել է | Կասկադային ոճաթերթ և Sass |
Արտոնագիր | Apache License 2.0[1] |
Կայք | lesscss.org |
Ելակոդ | github.com/less/less.js |
LESS, ոճային դինամիկ լեզու, որը ստեղծել է Alexis Sellier֊ը։ Այն ստեղծվել է ոճային Sass լեզվի ազդեցության արդյունքում և իր հերթին ազդել է «SCSS»-ի վրա, որում օգտագործվող շարահյուսությունը համարվում է CSS լեզվի ընդլայնում[2]։
LESS-ը ազատ ծրագրային ապահովմամբ արտադրանք է։ Նրա առաջին տարբերակը գրվել է Ruby լեզվով, սակայն հետագա տարբերակներում որոշվեց հրաժարվել ծրագրավորման այդ լեզվի կիրառումից և անցում կատարվեց JavaScript-ին։ LESS-ը ներմուծված մետալեզու է։
LESS-ն ապահովում է CSS-ի հետևյալ ընդլայնումները․ փոփոխականներ, ներդրված բլոկներ, միքսիններ, օպերատորներ և ֆունկցիաներ[3]։ LESS-ը կարող է աշխատել կլիենտի կողմից (Internet Explorer 6+, WebKit, Firefox) կամ սերվերում՝ Node.js-ի կամ Rhino-ի կառավարմամբ[3].
Փոփոխականներ
[խմբագրել | խմբագրել կոդը]LESS-ը թույլ է տալիս օգտագործել փոփոխականներ։ Փոփոխականի անունը սկսվում է @ սիմվոլով։ Վերագրման համար օգտագործվում է :
սիմվոլը[3]։
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
LESS-ի այս կոդը կկոմպիլացնի հետևյալ CSS ֆայլը․
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
Միքսիններ
[խմբագրել | խմբագրել կոդը]Միքսինները հնարավորություն են տալիս ներառել հատկությունների մի ամբողջ շարք[3]։
.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-ը հնարավորություն է տալիս ներդնել տրամաբանական կասկադավորում, երբ էլեմենտի հատկությունից բացի նրա մեջ կարող են լինել ենթադաս էլեմենտներ՝ իրենց հատկությունով։ Դրա շնորհիվ կրճատվում է կոդի երկարությունը[3]։
#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-ի ենթապրոցեսորներ են[4]։
LESS-ը ոգեշնչվել է Sass-ից[5]։ Sass-ը նախագծվել է CSS-ի պարզեցման և ընդլայնման համար։ LESS-ը ստեղծվել է CSS-ին հնարավորինս մոտ լինելու համար, ինչի արդյունքում երկուսի շարահյուսությունն էլ նույնն է։ Արդեն գոյություն ունեցող CSS կոդը հնարավոր է օգտագործել LESS-ում։ Sass-ի նոր տարբերակներն էլ են ներառում CSS-ի շարահյուսությունը, որը կոչվում է SCSS (Sassy CSS)[2][6]։
ZUSS (ZK User-interface Style Sheet)-ը[7] ոճային լեզու է, որը հիմնված է 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 համակարգերի համար[8], .less{} իրացում .NET framework-ի համար[9] կամ lessphp[10], որը թույլ է տալիս սերվերում կոմպիլացնել less ոճը PHP կայքերի համար։
Ծանոթագրություններ
[խմբագրել | խմբագրել կոդը]- ↑ https://github.com/less/less.js/blob/master/LICENSE
- ↑ 2,0 2,1 «Sass and Less». Արխիվացված է օրիգինալից 2009 թ․ հունիսի 21-ին. Վերցված է 2017 թ․ փետրվարի 12-ին.
- ↑ 3,0 3,1 3,2 3,3 3,4 LESS-ի պաշտոնական կայք
- ↑ «What's Wrong With CSS». Արխիվացված է օրիգինալից 2014 թ․ հունվարի 31-ին. Վերցված է 2017 թ․ փետրվարի 12-ին.
- ↑ About LESS
- ↑ Sass/Less Comparison
- ↑ ZUSS
- ↑ «SimpLESS — your LESS CSS compiler». Արխիվացված է օրիգինալից 2013 թ․ հուլիսի 29-ին. Վերցված է 2017 թ․ փետրվարի 12-ին.
- ↑ Less Css for .Net
- ↑ lessphp: Robert Raszczynski. lessphp: PHP implementation of Less CSS Արխիվացված 2012-04-15 Wayback Machine
Գրականություն
[խմբագրել | խմբագրել կոդը]- 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