The compiler monitoring the LESS folder will detect each time you save / update the LESS file. It will then compile the LESS code into CSS code, ...
DesignMethodASimpleIntroductiontoLessCSS. RequiredResourcesYouwillneedthefollowing:AnInternetBrowserAtexteditorsuchasNotepad++orDreamweaver.ALESScompilerForWindows–http://winLESS.org/ForOSX–http://incident57.com/less/BasicHTML&CSSKnowledge.DownloadtheLESStutorialfiles.OutcomeofthisTutorialYoushouldunderstandtheconceptofLESSandbeabletostartcreatingyourownwebpagesbuiltusingLESS.ThistutorialisjustanintroductionandwillillustratesomekeyconceptstobearinmindwhilstusingLESS.WhatisLESS?http://LESScss.org–LESScssisa“DynamicStylesheetLanguage”.Toaseasonedwebsitedeveloper,LESSshouldbefairlyeasytograsp,thekeyisindeedinthename“LESSCSS”.UsingLESSinsteadofconventionalCSSwillallowwebsitedeveloperstowritemuchLESSCSSthanusual,owingtothewaythatLESScodeisstructured.LESSalsoallowsuserstoemploytheuseofvariables,mixins,operations&functions.Hangonaminute–whatarethesethings?Toanyonewhohassomeknowledgeofscriptinglanguages,orserversidelanguages,thesetermsmaynotseemsounusual.Variables:Thesearequiteself-explanatory,variablesaresimplyawayofstoringdatawiththeintentionofre-usingthestoreddatamultipletimes.Thestoreddataisgivenauniquewayofidentifyingitforreuse.ThesyntaxforLESSvariablesisasfollows:@variableName:data;Sothedatastoredwithinthisvariableisthestring“data”.Mixins:Theseallowyoutoembedallthepropertiesofaclassintoanotherclassbysimplyincludingtheclassnameasoneofitsproperties.It’sjustlikevariables,butforwholeclasses.Mixinscanalsobehavelikefunctions,andtakearguments,asseenintheexamplebelow.Functions&Operations:Operationsletyouadd,subtract,divideandmultiplypropertyvaluesandcolours,givingyouthepowertocreatecomplexrelationshipsbetweenproperties.OperationsshouldonlybeperformedwithinparenthesesinordertoensurecompatibilitywithCSS.Functionsmapone-to-onewithJavaScriptcode,allowingyoutomanipulatevalueshoweveryouwant.Howdoesitwork?LESSrunsonboththeserver-side,orclientside.Forthepurposeofthistutorial;wewillbeusingitontheclientside.ThroughthistutorialwearegoingtobeaddingstylesthroughLESStoaverysimplewebpage.Pleasebearinmindthatthiswebpagewasnotdesignedtolookprettyinanyway,shapeorform.ItissimplytobeusedasanexampleforhowtouseLESStooptimizeyourCSS.Firstly,ensurethatyou’vedownloadedthetutorialfiles,obviouslythefilesarethefinishedversion,soherewewillgothroughstepbystep,analyzinghowitworks.NowyouwillwanttoinstallaLESScompiler,onceyou’vechosenyourapplicableLESScompiler,installitasyouwouldanyotherprogram.Onceit’sinstalledyouwillneedtoclickthe“AddFolder”buttontoaddthefolderyouwishtobemonitored.Basicallythefolderthat’smonitoredwillcontaintheLESSfile,thisiswhereyouwriteyourLESScss.ThecompilermonitoringtheLESSfolderwilldetecteachtimeyousave/updatetheLESSfile.ItwillthencompiletheLESScodeintoCSScode,andupdateyourCSSfileaccordingly.OnceyouhaveyourLESScompilersetup,you’rereadytostartlearninghowtowriteLESSCSS[html]
Home- About
- Products
Contact
WelcometoCompanyName
Ollienorthbluntslidedeathboxhandplant.JohnCardielfaceplantstreetfeeblelipslide.Boneairhurricanehardwarespeedwobbles.Yeahsoulskate900miniramp.Nose-bumpboardslidedeathboxhanger.Masoniteairwalkairslobair.DurometerquarterpipeJeremyWraydeathboxfullpipe.AeriallienairwheelsShilohGreathouseslobair.SnakeAndrewReynoldshandplantfastplantnose-bump.Frontsideairnosegrindpressureflipvert.BettygriptapeRonAllendeathboxjudoair.StepsshinnernosegrindSkateboardShufflegap.JasonJessegnarlyollieholefastplantvert.
- Loremipsumdolorsitamet.
- Aliquamtinciduntmauriseurisus.
- Vestibulumauctordapibusneque.
RegisteredUsersLogin
OurServices
Ollienorthbluntslidedeathboxhandplant.JohnCardielfaceplantstreetfeeblelipslide.Boneairhurricanehardwarespeedwobbles.
- Lorem
- Aliquam
- Morbi
- Praesent
Pellentesque
[/html]So,asyoushouldbeabletoseeherewehavetheHTMLstructureforaverybasicwebpage.Thiswebpagehasa“wrapper”div,whichwillkeepallofthecontentcontainedinsideit,wewillsetthistoaspecificsizeandcentreit.Withinthewrapperwehavea“header”div,whichwillcontainthelogo&navigation.Wewillthenhavea“main”div,containingthemaincontent,aswellasan“aside”div,whichwillholdthecontentforthesidebar.Nowthatyou’vegotyourheadroundtheHTMLstructureyoushouldbereadytobeginusingLESStocompileyourCSS.Sowithinyour“styles.LESS”fileyouwillbeginwritingyourLESS.[css]@charset"utf-8";@import"elements.LESS";/*CSSDocument*/@font-size:14px;@heading-font:"Georgia",TimesNewRoman,Times,serif;@big-heading:26px;@small-heading:16px;@border-color:#A1A1A1;@border-padding:20px;@impact-font:"HelveticaNeue",Helvetica,Arial,sans-serif;@impact-size:22px;[/css]It’sagoodideatosetyourvariablesatthetopofeachfilesothattheyareavailabletousethroughout.Sothevariablesherearedefinedbythe“@”symbol.Todeclareanewvariablewewrite@variableName:variable;.Thesevariablesarenowreadytouseinourcode.Theimportanceofthesevariablesliesinthefactthatwecanchangeeveryinstanceofthevariablesjustbychangingonelineofcoderatherthanhavingtogothroughandmanuallychangeitwithineachselector.ForexampleifwewantedtochangetheoverallfontsizeofasiteusingjuststraightCSSwewouldhavetogothroughandactuallychangeeachdeclarationofthefont-size,howeverherewewouldjustchangethevariablevalue,andeachdeclarationwherewehaveusedthisvariablewillchangeaccordingly.Herewehavesetthefontsize,thefontfortheheadings,afontsizeforlargerheadings,astandardbordercolour,thepaddingsometimesrequiredforborders,afontthatwillhaveimpact,andthefontsizeforanimpactheavyfont.YouwillseeatthetopoftheLESSfilethatanotherLESSfilehasbeenimported.Thisisausefullibraryofmixinswhichcanbeused,sincewehaveimporteditintoourownLESSfileanyofthemixinsfromtheELEMENTS.LESSfilecanbeusedwithinourfile.LESSelements.comToillustratetheuseoftheELEMENTS.LESSfile;wewilluseoneofthemixinswithinit,specificallyGradients.[css]html{font-size:@font-size;.gradient(#F5F5F5,#EEE,#FFF);margin:0;padding:0;height:100%;}[/css]WithintheCSSrulesforHTMLwehavefirstlyusedthefont-sizevariabletosettheoverallfontsizeforanythingwithinHTMLtagsonthepage.Secondlywehavealsousedthe.gradientmixinfromtheELEMENTS.LESSfile.UsingthiswehavebeenabletoproduceagradientbackgroundappliedtotheHTMLofthepage.Sotousethis,thefirstcolouristhebackgroundcolourtouseforbrowsersthatdon’tsupportgradients.Thesecondtwocoloursarethestartandstopcolors,goingfrombottomtotop.So,byusingLESS&LESSelementswehavebeenabletoaddalightgreygradientbackgroundtoourHTML,justbywritingafewlinesofcode.TheoutputtedCSSforthegradientmixinwillillustratejusthowmuchmoreefficientitistouseLESSratherthanstraightCSS.Seebelow.[css]background:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#eee),color-stop(1,#fff));background:-ms-linear-gradient(bottom,#eee,#fff);background:-moz-linear-gradient(centerbottom,#eee0,#fff100%);background:-o-linear-gradient(#fff,#eee);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’,endColorstr=’#eeeeee’,GradientType=0);[/css]ThegreatthingaboutthecompilationofthisCSSfromthemixinisthatitisascompatibleascanbewithallmajorbrowsers,evenbetter–youdon’thavetowriteanyofit,youjustsimplyusethemixinandlettheLESScompilerdotherestoftheworkforyou!ThecodebelowwillillustrateanothermajoradvantageofusingLESS.PaycloseattentiontothestructureoftheCSS.[css]a{color:#3D3D3D;text-decoration:none;&:hover{color:#2E2E2E;text-decoration:underline;}}[/css]AsavvydevelopershouldrealisethattheCSSruleisdeclaringthecolourforanchortags,settingthemnottobeunderlined,andthentheimportantbit…Thehoverstateforanchorsissetwithintheselectorforanchors.BelowistheconventionalwayofwritingtheaboverulewithjustCSS.[css]a{color:#3D3D3D;text-decoration:none;}a:hover{color:#2E2E2E;text-decoration:underline;}[/css]ThisistheadvantageousLESSstructurebeingusedinaverysimpleway,soletstryandmakeuseofthisinamorebeneficialway.[css]#header{padding-bottom:@border-padding;border-bottom:1pxsolid@border-color;margin-bottom:20px;p{color:#0f0;font-size:@font-size+6px;}img{float:left;}ul{list-style:none;margin:40px000;float:right;padding:0;height:80px;.gradient(#F5F5F5,#E3E3E3,#F0F0F0);border-radius:6px;}ulli{float:left;margin:0;border-right:1pxsolid#A1A1A1;height:80px;width:100px;text-align:center;&:hover{.gradient(#d1d1d1,#d3d3d3,#DCDCDC);}&.first{border-top-left-radius:9px;border-bottom-left-radius:9px;}&.last{border-right:none;border-top-right-radius:9px;border-bottom-right-radius:9px;}a{color:#3D3D3D;text-decoration:none;line-height:70px;display:block;&:hover{color:#2E2E2E;}}}}[/css]ThenestedstructurethatLESScanutilizeisquiteprevalentinthecodeabove.Alloftheruleswewishtoapplytotheheaderdivcanbecontainedwithintheheaderselector.Forinstance;theruleswhichwewishtoapplydirectlytotheheaderdivarelistedatthetopofthedeclaration.We’vesettheheaderitselftohaveabottomborder,withsomepaddingtoputabitofairbetweenitandtheheadercontent.TheotherCSSwithintheheaderruleapplyonlytoelementswithintheheader.Wehavesetrulesfor“p”,”img”,&“ul”justwithintheheaderdeclaration,theseruleswillapplydirectlytoParagraphs,images&unorderedlistsonlywithintheheaderdiv.Thisisamuchmoreefficientwayofwritingrulesforeachoftheelementswithintheheader.Belowwecanseeabriefexampleofhowthiswouldbestructuredconventionally.[css]#headerp{color:#0f0;font-size:@font-size+6px;}#headerimg{}#headerul{list-style:none;margin:40px000;float:right;padding:0;height:80px;.gradient(#F5F5F5,#E3E3E3,#F0F0F0);border-radius:6px;}[/css]IfwereferbacktotheefficientwayofwritingitusingLESS,andwelookspecificallyatthe“ulli”selectorwithintheheaderrule,thenwecansee“&”beingused.Inthisinstance,“&:hover”isthehoverstateoftheparentelement,whichinthiscaseisthe“ulli”,whichiswithintheheader.Soinotherwordsthe“&:hover”nestedwithinthe“ulli”referstothehoverstateofalllistitemswithinunorderedlistswithintheheaderdiv.Ratherthanconstructinglongselectornamestospecifyinheritance,inLESSyoucansimplynestselectorsinsideotherselectors.Thismakesinheritanceclearandstylesheetsshorter.[css]#main{float:left;width:580px;margin:020px00;h1,h2{font-family:@heading-font;}ul{border-top:1pxsolid@border-color;border-bottom:1pxsolid@border-color;padding-bottom:@border-padding;padding-top:@border-padding;li{margin:10pxauto;font-family:@impact-font;font-weight:bold;font-size:@impact-size;}}form{label{font-family:@heading-font;}input[type=email],input[type=password]{border:1pxsolid@border-color;padding:10px5px;.gradient(#F5F5F5,#E3E3E3,#F0F0F0);width:150px;}input[type=submit]{.gradient(#E58F90,#FF0000,#E58F90);border:1pxsolid@border-color;padding:10px;color:#ffffff;font-weight:bold;width:150px;cursor:pointer;}}}[/css]Inthecodeaboveyouwillseethatwehavemovedontostylingthemaindiv,usingthesamenestedselectortechniqueasbefore.Ontheunorderedlist(ul)&listitemswithinit(li)we’vemadeuseofthevariableswedeclaredatthebeginningofthefile,aswellasmakinguseofthegradientclassfromtheelements.lessfiletogivetheformwithinthemaindivagradientbackground.We’vealsobeenabletostylethebordercolourusingvariablesaswell.InfactmostoftheLESSwithinthemainselectorhasbeencreatedusingsomebasicLESStechniques.Basictechniquesbutstillveryuseful&efficientnonetheless![css]#aside{float:left;width:320px;h3{font-family:@heading-font;font-size:@big-heading;}ul{list-style:none;margin:0;padding:0;li{border:1pxsolid@border-color;border-bottom:0;padding:10px;.gradient(#F5F5F5,#E3E3E3,#F0F0F0);&:hover{.gradient(#d1d1d1,#d3d3d3,#DCDCDC);}&.last{border-bottom:1pxsolid@border-color;}}}}[/css]InthelastofourcodeyouwillseeonceagaintheadvantagesofthenestedLESSstructurecomeintoplay.Ifyou’vebeenpayingattentionyou’llseethatthelistitemswithintheunorderedlistintheasidedivhaveahoverstatedeclaredforthem,andusingthenestedselectorsyoucancreateaclasscalled“last”anditwillonlyapplytothelistitemswithintheasideulli.Hopefully,ifyou’vemadeitthisfarthroughthetutorialyoushouldhavefounditsomewhatuseful,sincethisisasimpleintroductiontoLESSwe’vetouchedonsomeofthekeyfoundationsandfeatureswhichmakeLESSsuchabeneficialtooltouse.TouseaCSSpre-processoryouarenotrestrictedtojustusingLESS,thereareotheroptionsavailabletoyousuchasSASS,similartoLESS,youwillhavetomakeupyourownmindastowhichoneyoushoulduse!ToviewaworkingexampleofthisclickhereWebsiteDesignGraphicDesigneCommerceDigitalPrintBrandingAnimationContact
