LESS - Functions - Tutorialspoint

文章推薦指數: 80 %
投票人數:10人

LESS - Functions, LESS maps JavaScript code with manipulation of values and uses predefined functions to manipulate HTML elements aspects in the style sheet ... Home CodingGround Jobs Whiteboard Tools Business Teachwithus LessBasicTutorial Less-Home Less-Overview Less-Installation LanguageFeatures Less-NestedRules Less-NestedDirectivesandBubbling Less-Operations Less-Escaping Less-Functions Less-NamespacesandAccessors Less-Scope Less-Comments Less-Importing Less-Variables Less-Extend Less-Mixins Less-ParametricMixins Less-MixinsasFunctions Less-PassingRulesetstoMixins Less-ImportDirectives Less-ImportOptions Less-MixinGuards Less-CSSGuards Less-Loops Less-Merge Less-ParentSelectors Functions Less-MiscFunctions Less-StringFunctions Less-ListFunctions Less-MathFunctions Less-TypeFunctions Less-ColorDefinationFunctions Less-ColorChannelFunctions Less-ColorOperation Less-ColorBlendingFunctions Usage Less-CommandLineUsage UsingLessInTheBrowser Less-Browsersupport Less-Plugins Less-ProgrammaticUsage Less-OnlineCompilers Less-GUIs Less-EditorsandPlugins Less-ThirdPartyCompilers Less-Frameworks LessUsefulResources Less-QuickGuide Less-UsefulResources Less-Discussion SelectedReading UPSCIASExamsNotes Developer'sBestPractices QuestionsandAnswers EffectiveResumeWriting HRInterviewQuestions ComputerGlossary WhoisWho LESS-Functions Advertisements PreviousPage NextPage  Description LESSmapsJavaScriptcodewithmanipulationofvaluesandusespredefinedfunctionstomanipulateHTMLelementsaspectsinthestylesheet.Itprovidesseveralfunctionstomanipulatecolorssuchasroundfunction,floorfunction,ceilfunction,percentagefunctionetc. Example ThefollowingexampledemonstratestheuseoffunctionsintheLESSfile−

LessFunctions

ExampleusingFunctions

LESSenablescustomizable, manageableandreusablestylesheetforwebsite. Nowcreatethestyle.lessfile. style.less @color:#FF8000; @width:1.0; .mycolor{ color:@color; width:percentage(@width); } Youcancompilethestyle.lessfiletostyle.cssbyusingthefollowingcommand− lesscstyle.lessstyle.css Nowexecutetheabovecommand;itwillcreatethestyle.cssfileautomaticallywiththefollowingcode− style.css .mycolor{ color:#FF8000; width:100%; } Output Followthesestepstoseehowtheabovecodeworks− Savetheabovehtmlcodeinthefunctions.htmlfile. OpenthisHTMLfileinabrowser,displayedyouwillreceivethefollowingoutput. PreviousPage PrintPage NextPage  Advertisements


請為這篇文章評分?