Getting Started

6/9/2015
Gettingstarted|Less.js
Gettingstarted
AnoverviewofLess,howtodownloadanduse,examplesandmore.
lessv2.5.1hasbeenreleasedSeewhat'snew
(https://github.com/less/less.js/blob/master/CHANGELOG.md)
GettingStarted
LessisaCSSpreprocessor,meaningthatitextendstheCSSlanguage,addingfeaturesthat
allowvariables,mixins,functionsandmanyothertechniquesthatallowyoutomakeCSSthat
ismoremaintainable,themableandextendable.
LessrunsinsideNode,inthebrowserandinsideRhino.Therearealsomany3rdpartytools
thatallowyoutocompileyourfilesandwatchforchanges.
Forexample:
@base:#f938ab;
.boxshadow(@style,@c)when(iscolor(@c)){
webkitboxshadow:@style@c;
boxshadow:@style@c;
}
.boxshadow(@style,@alpha:50%)when(isnumber(@alpha)){
.boxshadow(@style,rgba(0,0,0,@alpha));
}
.box{
color:saturate(@base,5%);
bordercolor:lighten(@base,30%);
div{.boxshadow(005px,30%)}
}
http://lesscss.org/#reference
1/8
6/9/2015
compilesto
.box{
color:#fe33ac;
bordercolor:#fdcdea;
}
.boxdiv{
webkitboxshadow:005pxrgba(0,0,0,0.3);
boxshadow:005pxrgba(0,0,0,0.3);
}
UsingLess
Lesscanbeusedonthecommandlinevianpm,downloadedasascriptfileforthe
browserorusedinawidevarietyofthirdpartytools.SeetheUsage
(usage/index.html)sectionformoredetailedinformation.
Installation
TheeasiestwaytoinstallLessontheserver,isvianpm,thenode.js(http://nodejs.org/)
packagemanager,asso:
$npminstallgless
CommandlineUsage
Onceinstalled,youcaninvokethecompilerfromthecommandline,assuch:
$lesscstyles.less
ThiswilloutputthecompiledCSSto stdout .TosavetheCSSresulttoafileofyourchoice

use:
2/8
6/9/2015
$lesscstyles.lessstyles.css
TooutputminifiedyoucanCSSuse cleancss plugin(https://github.com/less/lessplugin

cleancss).Whenthepluginisinstalled,aminifiedCSSoutputisspecifiedwith cleancss
option:
$lessccleancssstyles.lessstyles.min.css
Toseeallthecommandlineoptionsrun lessc withoutparametersorseeUsage

(usage/index.html).
UsageinCode
Youcaninvokethecompilerfromnode,assuch:
varless=require('less');
less.render('.class{width:(1+1)}',function(e,output){
console.log(output.css);
});
whichwilloutput
.class{
width:2;
}
Configuration
Youmaypasssomeoptionstothecompiler:
3/8
6/9/2015
varless=require('less');
less.render('.class{width:(1+1)}',
{
paths:['.','./lib'],//Specifysearchpathsfor@importdirectives
filename:'style.less',//Specifyafilename,forbettererrormessage
s
compress:true//MinifyCSSoutput
},
function(e,output){
console.log(output.css);
});
SeeUsage(usage/index.html)formoreinformation.
ThirdPartyTools
SeetheUsage(usage/index.html)sectionfordetailsofothertools.
CommandlinewithRhino
Eachless.jsreleasecontainsalsorhinocompatibleversion.
Commandlinerhinoversionrequirestwofiles:
lessrhino<version>.jscompilerimplementation,
lesscrhino<version>.jscommandlinesupport.
Commandtorunthecompiler:
javajarjs.jarflessrhino<version>.jslesscrhino<version>.jsstyles.l
essstyles.css
Thiswillcompilestyles.lessfileandsavetheresulttostyles.cssfile.Theoutputfileparameter
isoptional.Ifitismissing,lesswilloutputtheresultto stdout .
ClientsideUsage
Usingless.jsinthebrowserisgreatfordevelopment,butit'snotrecommendedfor
production
4/8
6/9/2015
ClientsideistheeasiestwaytogetstartedandgoodfordevelopingwithLess,butin
production,whenperformanceandreliabilityisimportant,werecommendprecompiling
usingnode.jsoroneofthemanythirdpartytoolsavailable.
Tostartoff,linkyour .less stylesheetswiththe rel attributesetto" stylesheet/less ":
<linkrel="stylesheet/less"type="text/css"href="styles.less"/>
Next,downloadless.js(https://github.com/less/less.js/archive/master.zip)andincludeitina
<script></script> taginthe <head> elementofyourpage:
<scriptsrc="less.js"type="text/javascript"></script>
Tips
Makesureyouincludeyourstylesheetsbeforethescript.
Whenyoulinkmorethanone .less stylesheeteachofthemiscompiled
independently.Soanyvariables,mixinsornamespacesyoudefineinastylesheetare
notaccessibleinanyother.
Duetothesameoriginpolicyofbrowsersloadingexternalresourcesrequiresenabling
CORS(http://enablecors.org/)
BrowserOptions
Optionsaredefinedbysettingthemonaglobal less objectbeforethe
<scriptsrc="less.js"></script> :
<!setoptionsbeforeless.jsscript>
<script>
less={
env:"development",
async:false,
fileAsync:false,
poll:1000,
functions:{},
dumpLineNumbers:"comments",
relativeUrls:false,
rootpath:":/a.com/"
};
</script>
<scriptsrc="less.js"></script>
5/8
6/9/2015
Orforbrevitytheycanbesetasattributesonthescriptandlinktags(requiresJSON.parse
browsersupportorpolyfill).
<scriptsrc="less.js"datapoll="1000"datarelativeurls="false"></script>
<linkdatadumplinenumbers="all"dataglobalvars='{myvar:"#ddffee",myst
r:"\"quoted\""}'rel="stylesheet/less"type="text/css"href="less/styles.le
ss">
LearnmoreaboutBrowserOptions(usage/#usinglessinthebrowsersettingoptions)
GetLess.js
Browserdownloads
DownloadLess.jsv2.5.1(https://raw.github.com/less/less.js/v2.5.1/dist/less.min.js)
DownloadSourceCode(https://github.com/less/less.js/archive/v2.5.1.zip)
GetthelatestLess.jssourcecodebydownloadingitdirectlyfromGitHub.
CloneorForkviaGitHub(https://github.com/less/less.js.git)
Forktheprojectandsendusapullrequest!
InstallwithBower(http://bower.io)
InstalltheLess.jsprojectandJavaScriptbyrunningthefollowinginthecommandline:
bowerinstallless
LessCDN
(//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js)
<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></sc
ript>
6/8
6/9/2015
LicenseFAQs
Less.jsisreleasedundertheApache2License(thoughthereareplanstoduallicenseit
(https://github.com/less/less.js/issues/1029)).Copyright20092015,AlexisSellierandthe
LessCoreTeam(seeabout).Boileddowntosmallerchunks,itcanbedescribedwiththe
followingconditions.
Itallowsyouto:
FreelydownloadanduseLess.js,inwholeorinpart,forpersonal,companyinternalor
commercialpurposes
UseLess.jsinpackagesordistributionsthatyoucreate
Itforbidsyouto:
RedistributeanypieceofLess.jswithoutproperattribution
Itrequiresyouto:
IncludeacopyofthelicenseinanyredistributionyoumaymakethatincludesLess.js
ProvideclearattributiontoTheLessCoreTeamforanydistributionsthatinclude
Less.js
Itdoesnotrequireyouto:
IncludethesourceofLess.jsitself,orofanymodificationsyoumayhavemadetoit,in
anyredistributionyoumayassemblethatincludesit
SubmitchangesthatyoumaketoLess.jsbacktotheLess.jsproject(thoughsuch
feedbackisencouraged)
ThefullLess.jslicenseislocatedintheprojectrepository
(https://github.com/less/less.js/blob/master/LICENSE)formoreinformation.
7/8
6/9/2015
Star
12,737
Fork
2,931
Less.jsandthesedocsaremaintainedbythecorelessteam(about/#team).
DocumentationsourcecodereleasedundertheMITLicense(https://github.com/less/less
docs/blob/master/LICENSEMIT),documentationunderCCBY3.0
(http://creativecommons.org/licenses/by/3.0/).
Currentlyv2.5.1 Less.jsIssues(https://github.com/less/less.js/issues) LessDocsIssues
(https://github.com/less/lessdocs/issues?&state=open) Changelog
(https://github.com/less/less.js/blob/master/CHANGELOG.md)
8/8

Getting Started

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Getting Started

Hochgeladen von

Copyright:

Verfügbare Formate

6/9/2015

ThiswilloutputthecompiledCSSto stdout .TosavetheCSSresulttoafileofyourchoice

TooutputminifiedyoucanCSSuse cleancss plugin(https://github.com/less/lessplugin

Toseeallthecommandlineoptionsrun lessc withoutparametersorseeUsage

Das könnte Ihnen auch gefallen