Category: less

LESS – Quick Guide ”; Previous Next LESS – Overview LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for website. LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly. CSS Preprocessor is a scripting language that extends CSS and gets compiled into regular CSS syntax, so that it can be read by your web browser. It provides functionalities like variables, functions, mixins and operations that allow you to build dynamic CSS. Why LESS? Let us now understand why do we use LESS. LESS supports creating cleaner, cross-browser friendly CSS faster and easier. LESS is designed in JavaScript and also created to be used in live, which compiles faster than other CSS pre-processors. LESS keeps your code in modular way which is really important by making it readable and easily changeable. Faster maintenance can be achieved by the use of LESS variables. History LESS was designed by Alexis Sellier in 2009. LESS is an open-source. The first version of LESS was written in Ruby; in the later versions, the use of Ruby was replaced by JavaScript. Features Cleaner and more readable code can be written in an organized way. We can define styles and it can be reused throughout the code. LESS is based on JavaScript and is a super set of CSS. LESS is an agile tool that sorts out the problem of code redundancy. Advantages LESS easily generates CSS that works across the browsers. LESS enables you to write better and well-organized code by using nesting. Maintenance can be achieved faster by the use of variables. LESS enables you to reuse the whole classes easily by referencing them in your rule sets. LESS provides the use of operations that makes coding faster and saves time. Disadvantages It takes time to learn if you are new to CSS preprocessing. Due to the tight coupling between the modules, more efforts should be taken to reuse and/or test dependent modules. LESS has less framework compared to older preprocessor like SASS, which consists of frameworks Compass, Gravity and Susy. LESS – Installation In this chapter, we will understand, in a step-by-step manner, how to install LESS. System Requirements for LESS Operating System − Cross-platform Browser Support − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari. Installation of LESS Let us now understand the installation of LESS. Step 1 − We need NodeJs to run LESS examples. To download NodeJs, open the link https://nodejs.org/en/, you will see a screen as shown below − Dowload the Latest Features version of the zip file. Step 2 − Run the setup to install the Node.js on your system. Step 3 − Next, Install LESS on the server via NPM (Node Package Manager). Run the following command in the command prompt. npm install -g less Step 4 − After successful installation of LESS, you will see the following lines on the command prompt − `– [email protected] +– [email protected] | `– [email protected] +– [email protected] +– [email protected] +– [email protected] +– [email protected] | `– [email protected] +– [email protected] | `– [email protected] +– [email protected] | +– [email protected] | +– [email protected] | | `– [email protected] | | +– [email protected] | | `– [email protected] | +– [email protected] | | `– [email protected] | | +– [email protected] | | +– [email protected] | | +– [email protected] | | +– [email protected] | | +– [email protected] | | `– [email protected] | +– [email protected] | +– [email protected] | | `– [email protected] | +– [email protected] | +– [email protected] | +– [email protected] | | `– [email protected] | +– [email protected] | | +– [email protected] | | | +– [email protected] | | | | `– [email protected] | | | +– [email protected] | | | +– [email protected] | | | | `– [email protected] | | | +– [email protected] | | | `– [email protected] | | +– [email protected] | | | `– [email protected] | | +– [email protected] | | | +– [email protected] | | | +– [email protected] | | | | `– [email protected] | | | +– [email protected] | | | `– [email protected] | | `– [email protected] | | `– [email protected] | +– [email protected] | | +– [email protected] | | +– [email protected] | | +– [email protected] | | `– [email protected] | +– [email protected] | | +– [email protected] | | +– [email protected] | | | +– [email protected] | | | +– [email protected] | | | `– [email protected] | | `– [email protected] | | +– [email protected] | | +– [email protected] | | | `– [email protected] | | +– [email protected] | | +– [email protected] | | +– [email protected] | | `– [email protected] | +– [email protected] | +– [email protected] | +– [email protected] | +– [email protected] | | `– [email protected] | +– [email protected] | +– [email protected] | +– [email protected] | +– [email protected] | +– [email protected] | `– [email protected] `– [email protected] Example Following is a simple example of LESS. hello.htm <!doctype html> <head> <link rel = “stylesheet” href = “style.css” type = “text/css” /> </head> <body> <h1>Welcome to TutorialsPoint</h1> <h3>Hello!!!!!</h3> </body> </html> Let us now create a file style.less which is quite similar to CSS, the only difference is that it will be saved with .less extension. Both the files, .html and .less should be created inside the folder nodejs. style.less @primarycolor: #FF7F50; @color:#800080; h1 { color: @primarycolor; } h3 { color: @color; } Compile style.less file to style.css by using the following command − lessc style.less style.css When you run the above command, it will create the style.css file automatically. Whenever you change the LESS file, it”s necessary to run the above command in the cmd and then the style.css file will get updated. The style.css file will have the following code when you run the above command − style.css h1 { color: #FF7F50; } h3 { color: #800080; } Output Let us now carry out the following steps to see how the above code works − Save the above html code in the hello.htm file. Open this HTML file in a browser, the following output will get displayed. LESS – Nested Rules

LESS – Frameworks ”; Previous Next UI/Theme Frameworks and Components LESS supports some of the UI/Theme frameworks as listed in the following table − Sr.No. Framework & Description 1 1pxdeep It is flat Bootstrap 3 theme that provides powerful color scheme controls. 2 Bootflat It is an open-source framework based on Bootstrap. 3 BootPress It is a PHP framework based on flat file CMS 4 Bootstrap It is powerful mobile first front-end framework for faster and easier web development. 5 Bootstrap a11y theme It provides easy accessibility for web development. 6 Bootswatch It is an open-source theme that provides free themes for Bootstrap. 7 Cardinal It is mobile-first CSS framework that allows maintaining CSS for responsive websites, user interfaces, and applications. 8 CSSHorus It is a library that provides easy development of mobile websites. 9 Flat UI Free It is based on Bootstrap 3 which contains basic and complex components and provides theme design for Bootstrap. 10 frontsize It is a frontend framework that contains a set of tools to build widgets. 11 InContent It specifies the description of the image using CSS3 and SASS/LESS. 12 Ink It creates responsive web interfaces. 13 JBST It is powerful theme framework used for creating child themes for WordPress and used as standalone website builder. 14 KNACSS It is used to develop HTML/CSS projects by using responsive and extensible style sheets. 15 Kube It is CSS framework used for professional designers and developers. 16 Metro UI CSS It is a frontend framework used for creating Windows Metro Style on the projects. 17 Pre It is CSS framework that uses LESS. 18 prelude It is frontend CSS framework that uses LESS. 19 Schema It is a light and responsive framework which helps to build complex websites. 20 Semantic UI It is a user interface framework that creates responsive layouts using HTML. 21 UIkit It is a frontend framework which includes HTML, CSS, and JS components and easy to use and develop web applications. 22 ngBoilerplate It is grunt based build system used for AngularJS projects. 23 less-rail It is a dynamic stylesheet language that uses Less.js for Rails projects. 24 Wee It is a frontend framework which contains HTML, CSS and JavaScript bootstrap components for developing responsive web projects. Grid Systems LESS supports grid systems frameworks as listed in the following table − Sr.No. Framework & Description 1 Flexible Grid System It is a CSS framework which creates web projects in a flexible way. 2 adaptGrid It is a responsive grid system for developing web applications. 3 Fluidable It is lightweight responsive grid system based on LESS preprocessor. 4 Golden Grid System It is grid system for responsive design. 5 LESS Zen Grid It is used for solving sub pixel rounding issue. 6 Order.less It is a LESS library used for alignment, grid system and modular scales. 7 responsibly It is a customizable and standalone grid system. 8 Responsive Boilerplate It is a lightweight grid system used to create responsive web design for the sites. 9 Semantic.gs It is the default distribution of web browser to its operating system. Mixin Libraries LESS provides mixin libraries as listed in the following table − Sr.No. Framework & Description 1 3L It provides newest CSS3 features for LESS preprocessor. 2 animate It is a library used for browser animations used in the projects. 3 Clearless It uses reusable LESS mixins without destroying the style and creating excessive size in stylesheets. 4 Css3LessPlease It converts css3please.com to LESS mixins and element will get instant changes when you run the CSS. 5 CssEffects It provides CSS style effects written as LESS mixins. 6 Cssowl It is a mixin library which supports for LESS, SASS and Stylus. 7 cube.less It is a 3D animated cube created using only CSS. 8 tRRtoolbelt.less It is a library which provides mixins and functions for performing actions on LESS files. 9 est It is based on LESS which allows to write LESS code more efficiently. 10 Hexagon It creates CSS hexagons with size and color. 11 homeless It is a mixin library that contains helpful functions for the Less.js. 12 LESS Elements It is a collection of mixins for the LESS preprocessor. 13 LESS Hat It is a mixin library which helps in exporting CSS for all browsers and creates number of shadows, gradients and animations etc. 14 lessley It is testing suite which is written in LESS. 15 LESS-bidi It is a collection of LESS mixins which provides bi-directional styling without duplication of code. 16 LESS-Mix It is a mixin library written in LESS. 17 media-query-to-type It is used for creating media queries which allows Internet Explorer 8 and below versions to access the content. 18 More-Colors.less It provides variables for color manipulation while designing web applications. 19 more-less It is a library which allows to write CSS code for cross browser compatibility. 20 More.less It is a combination of Compass and Twitter Bootstrap which provides more to LESS by using CSS3 and cross browser mixins. 21 more-or-less It provides powerful mixins for less.js. 22 normalize.less It provides normalized CSS using LESS. 23 Oban It is a collection of mixins which speeds up the development process of the web application. 24 Preboot It is a set of LESS services that uses mixins and variables for writing better CSS and is formed from the Bootstrap. 25 prelude-mixins It is a LESS mixin library. 26 Shape.LESS It provides a number of mixins for specifying various shapes for the application. Print Page Previous Next Advertisements ”;

LESS – Plugins ”; Previous Next In this chapter, we will understand how a Plugin can be uploaded to expand the functionality of the site. Plugins can be used to make your work easier. Command Line To install plugin using command line, you first need to install the lessc plugin. The plugin can be installed using less-plugin at the beginning. The following command line will help you install the clean-css plugin − npm install less-plugin-clean-css Directly, you can use the installed plugin by using the following command − lessc –plugin = path_to_plugin = options Using a Plugin in Code In Node, the plugin is required and it is pass in an array as an option plugin to the less. var pluginName = require(“pluginName”); less.render(myCSS, { plugins: [pluginName] }) .then(function(output) { }, function(error) { }); In the Browser Before the less.js script, the plugin author should include the javascript file in the page. <script src = “plugin.js”></script> <script> less = { plugins: [plugin] }; </script> <script src = “less.min.js”></script> List of Less Plugins The following table lists out the plugins available in LESS. Postprocessor/Feature Plugins Sr.No. Plugins & Description 1 Autoprefixer It is used to add prefixes to CSS after translation from LESS. 2 CSScomb It helps to improve the maintenance of your stylesheet. 3 clean-css It minifies the CSS output from LESS. 4 CSSWring It compresses or minify the CSS output from LESS. 5 css-flip It is used to generate the CSS from left-to-right(LTR) or right-to-left(RTL). 6 functions It writes the function of LESS in the LESS itself. 7 glob It is used to import multiple files. 8 group-css-media-queries It does the post-processing for Less. 9 inline-urls Automatically converts the URL to data uri. 10 npm-import It imports from npm package for less. 11 pleeease It is used to postprocess Less. 12 rtl LESS is reversed from ltr(left-to-right) to rtl(right-to-left). Framework/Library Importers Sr.No. Importers & Description 1 Bootstrap Bootstrap LESS code is imported before the custom LESS code. 2 Bower Resolve LESS files are imported from the Bower packages. 3 Cardinal CSS for less.js Before the custom LESS code, the LESS code for Cardinal is imported. 4 Flexbox Grid Most commonly imported Framework or library importer. 5 Flexible Grid System It imports the Flexible Grid System. 6 Ionic It imports the ionic framework. 7 Lesshat It imports the Lesshat mixins. 8 Skeleton It imports the skeleton less code. Function Libraries Sr.No. Importers & Description 1 advanced-color-functions It is used to find more contrasting colors. 2 cubehelix Using gamma correction value of 1, the cubehelix function can return a color between the two colors. 3 lists This lists manipulation functions library. For Plugin Authors LESS allow an author to combine with less. { install: function(less, pluginManager) { }, setOptions: function(argumentString) { }, printUsage: function() { }, minVersion: [2, 0, 0] } pluginManager provides a holder which can add file managers, post processors or visitors. setOptions function passes the string. printUsage function is used to explain the options. Print Page Previous Next Advertisements ”;

LESS – Color Defination Functions ”; Previous Next Description LESS provides number of useful color functions to alter and manipulate colors in different ways. LESS supports some of the Color Definition Functions as shown in the table below − Sr.No. Function & Description Example 1 rgb It creates color from red, green and blue values. It has following parameters − red − It contains integer between 0 – 255 or percentage between 0 – 100%. green − It contains integer between 0 – 255 or percentage between 0 – 100%. blue − It contains integer between 0 – 255 or percentage between 0 – 100%. rgb(220,20,60) it converts color with rgb values as − #dc143c 2 rgba It determines color from red, green, blue and alpha values. It has the following parameters − red − It contains integer between 0 – 255 or percentage between 0 – 100%. green − It contains integer between 0 – 255 or percentage between 0 – 100%. blue − It contains integer between 0 – 255 or percentage between 0 – 100%. alpha − It contains number between 0 – 1 or percentage between 0 – 100%. rgba(220,20,60, 0.5) it converts color object with rgba values as − rgba(220, 20, 60, 0.5) 3 argb It defines hex representation of color in #AARRGGBB format. It uses the following parameter − color − It specifies color object. argb(rgba(176,23,31,0.5)) it returns the argb color as − #80b0171f 4 hsl It generates the color from hue, saturation and lightness values. It has following parameters − hue − It contains integer between 0 – 360 which represents degrees. saturation − It contains number between 0 – 1 or percentage between 0 – 100%. lightness − It contains number between 0 – 1 or percentage between 0 – 100%. hsl(120,100%, 50%) it returns the color object using HSL values as − #00ff00 5 hsla It generates the color from hue, saturation, lightness and alpha values. It has the following parameters − hue − It contains integer between 0 – 360 which represents degrees. saturation − It contains number between 0 – 1 or percentage between 0 – 100%. lightness − It contains number between 0 – 1 or percentage between 0 – 100%. alpha − It contains number between 0 – 1 or percentage between 0 – 100%. hsla(0,100%,50%,0.5) it specifies the color object using HSLA values as − rgba(255, 0, 0, 0.5); 6 hsv It produces the color from hue, saturation and value values. It contains following parameters − hue − It contains integer between 0 – 360 which represents degrees. saturation − It contains number between 0 – 1 or percentage between 0 – 100%. value − It contains number between 0 – 1 or percentage between 0 – 100%. hsv(80,90%,70%) it converts color object with hsv values as − #7db312 7 hsva It produces the color from hue, saturation, value and alpha values. It uses the following parameters − hue − It contains integer between 0 – 360 which represents degrees. saturation − It contains number between 0 – 1 or percentage between 0 – 100%. value − It contains number between 0 – 1 or percentage between 0 – 100%. alpha − It contains number between 0 – 1 or percentage between 0 – 100%. hsva(80,90%,70%,0.6) it specifies color object with hsva values as − rgba(125, 179, 18, 0.6) Print Page Previous Next Advertisements ”;

LESS – Editors and Plugins ”; Previous Next In this chapter, we will understand the importance of editors and plugins in LESS. An Editor is a system or program which allows a user to edit text. Plugin is a piece of software that is used to expand the functionality of the site. Let us now discuss editors and IDEs for LESS. Sr.No. Editors and IDEs & Description 1 Crunch! It supports cross-platforms like Windows, Mac and Linux. It provides editor with integrated compiling. 2 Mindscape Web Workbench It provide CoffeeScript, SASS, Compass and LESS editing and makes modern web development easy in Visual Studio. 3 NetBeans It is an open-source Java-based IDE. This helps in the quick development of your desktop, mobile and web applications as well as HTML5 applications that involve HTML, JavaScript and CSS. 4 TextMate It is a general purpose graphical text editor for Mac OS X. It features declarative customizations, recordable macros, snippets, shell integration, open documents tabs and an extensible bundle system. 5 Vim The vim bundle adds functionalities like indenting, highlighting and auto completion for the dynamic stylesheet language LESS. 6 Emacs It contains less-css-model that provides an Emacs mode for LESS CSS (lesscss.org); Emacs supports compile-on-save. 7 jetBrains WebStorm and PhpStorm WebStrom is a lightweight and powerful IDE. It is perfectly equipped for complex client-side and server development with Node.js. PhpStorm is an PHP IDE, which supports deep code understanding, and provides top-notch coding assistance and support for all major tools and frameworks. 8 Brackets It is a lightweight, powerful and an open-source code editor that helps web designers and front-end developers. 9 CodeLobster It is a portable integrated development environment (IDE) primarily for PHP. It also supports HTML, CSS and JavaScript development and plugins are available for Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii and CakePHP. 10 KineticWing IDE It is a quick, clean, lightweight and portable IDE. It is a full-size development suite that helps you work smart and fast. 11 nodeMirror It is an open-source and easily customizable IDE. It utilizes CodeMirror.net, pty.js and other libraries. 12 HTML-Kit Tools This is a modern web editor for HTML5, CSS3, JavaScript and more. With this, you can edit, preview, validate publish and manage projects from modern standards compliant editor. Sublime Text 2 & 3 The sublime text provides different options for LESS as listed in the following table − Sr.No. Options & Description 1 Less-sublime LESS syntax for sublime text provides syntax highlighting for .less files, along with snippets. 2 Sublime-Less-to-CSS Sublime text 2 and 3 plugin to compile .less files to CSS when you save. It requires lessc installed on PATH. 3 Less-build-sublime LESS build system for sublime text 2 which provides two build systems for LESS files, both minified and non-minified. 4 SublimeOnSaveBuild It is a simple plugin for sublime text 2 to trigger a build when you click Save. Works well with pre-processors like LESS, Compass and any others. Eclipse Eclipse has two plugins for LESS as listed in the following table − Sr.No. Plugins & Description 1 Eclipse Less Plugin By extending the Eclipse IDE, this plugin provides useful features to edit and compile LESS stylesheets. 2 Transpiler Plugin This Eclipse plugin automatically transpiles your files like LESS, SASS, CoffeeScript, etc. Visual Studio Visual Studio has the following different options for LESS − Sr.No. Options & Description 1 CSS Is Less This extension makes LESS files open with CSS language service. 2 Web Essentials 2012 This extension lets you perform common tasks much easier and adds useful features to Visual studio for web developers. 3 Web Essentials 2013 It extends Visual Studio with a lot of new features which are not specific to a specific language or editor. 4 Web Tools 2013 This helps you in the development tasks that involve ASP.NET Dreamweaver The following points need to be considered while working with Dreamweaver. It is an Adobe application used by web designers and developers to create applications and websites. It is capable of working across multiple platforms including browsers, devices and tablets. Web designers use Dreamweaver for creating website prototypes. DMXzone Less CSS Compiler makes all the LESS CSS powers directly in Dreamweaver. Notepad++ 6.x The following points needs to be considered while working on Notepad++. Notepad++ is a free text editor and source code editor which supports tabbed editing, i.e., working with multiple open files in a single window. LESS for Notepad++ is an xml file that provides syntax highlighting or coloring for .less files. To get more information, click on this link. To install Notepad++ click this link. Print Page Previous Next Advertisements ”;

LESS – Command Line Usage ”; Previous Next Using the command line, we can compile the .less file to .css. Installing lessc for Use Globally The following command is used to install lessc with npm(node package manager) to make the lessc available globally. npm install less -g You can also add a specific version after the package name. For example npm install [email protected] -g Installing for Node Development The following command is used to install the latest version of lessc in your project folder. npm i less -save-dev It is also added to the devDependencies in your project package.json. Beta releases of lessc It is tagged as beta when the lessc structure is published to npm Here, the new functionality is developed periodically. less -v is used to get the current version. Installing an unpublished development version of lessc The commit – ish is to be specified, when we proceed to install an unpublished version of lessc and the instructions need to be followed for identifying a git URL as a dependency. This will ensure that you are using the correct version of leesc for your project. Server-Side and Command Line Usage bin/lessc includes binary in the repository. It works with Windows, OS X and nodejs on *nix. Command Line Usage Input is read from stdin when source is set to dash or hyphen(-). lessc [option option = parameter …] [destination] For instance, we can compile .less to .css by using the following command − lessc stylesheet.less stylesheet.css We can compile .less to .css by and minify the result using the following command. lessc -x stylesheet.less stylesheet.css Options Following table lists out options used in command line usage − Sr.No. Options & Description Command 1 Help Help message is displayed with the options available. lessc -help lessc -h 2 Include Paths It includes the available paths to the library. These paths can be referenced simply and relatively in the Less files. The paths in windows are separated by colon(:) or semicolon(;). lessc –include-path = PATH1;PATH2 3 Makefile It generates a makefile import dependencies list to stdout as output. lessc -M lessc –depends 4 No Color It disables colorized output. lessc –no-color 5 No IE Compatibility It disables IE compatibility checks. lessc –no-ie-compat 6 Disable Javascript It disables the javascript in less files. lessc –no-js 7 Lint It checks the syntax and reports error without any output. lessc –lint lessc -l 8 Silent It forcibly stops the display of error messages. lessc –silent lessc -s 9 Strict Imports It force evaluates imports. lessc –strict-imports 10 Allow Imports from Insecure HTTPS Hosts It imports from the insecure HTTPS hosts. lessc –insecure 11 Version It displays the version number and exits. lessc -version lessc -v 12 Compress It helps in removing the whitespaces and compress the output. lessc -x lessc –compress 13 Source Map Output Filename It generates the sourcemap in less. If sourcemap option is defined without filename then it will use the extension map with the Less file name as source. lessc –source-map lessc -source-map = file.map 14 Source Map Rootpath Rootpath is specified and should be added to Less file paths inside the sourcemap and also to the map file which is specified in your output css. lessc –source-map-rootpath = dev-files/ 15 Source Map Basepath A path is specified which has to be removed from the output paths. Basepath is opposite of the rootpath option. lessc –source-map-basepath = less-files/ 16 Source Map Less Inline All the Less files should be included in the sourcemap. lessc –source-map-less-inline 17 Source Map Map Inline It specifies that in the output css the map file should be inline. lessc –source-map-map-inline 18 Source Map URL A URL is allowed to override the points in the map file in the css. lessc –source-map-url = ../my-map.json 19 Rootpath It sets paths for URL rewriting in relative imports and urls. lessc -rp=resources/ lessc –rootpath=resources/ 20 Relative URLs In imported files, the URL are re-written so that the URL is always relative to the base file. lessc -ru lessc –relative-urls 21 Strict Math It processes all Math function in your css. By default, it”s off. lessc -sm = on lessc –strict-math = on 22 Strict Units It allows mixed units. lessc -su = on lessc –strict-units = on 23 Global Variable A variable is defined which can be referenced by the file. lessc –global-var = “background = green” 24 Modify Variable This is unlike global variable option; it moves the declaration at the end of your less file. lessc –modify-var = “background = green” 25 URL Arguments To move on to every URL, an argument is allowed to specify. lessc –url-args = “arg736357” 26 Line Numbers Inline source-mapping is generated. lessc –line-numbers = comments lessc –line-numbers = mediaquery lessc –line-numbers = all 27 Plugin It loads the plugin. lessc –clean-css lessc –plugin = clean-css = “advanced” Print Page Previous Next Advertisements ”;

LESS – Color Operation ”; Previous Next Description LESS provides number of useful operation functions to alter and manipulate colors in different ways and take parameters in the same units. LESS supports some of the Color Operation Functions as shown in the table below − Sr.No. Directives & Description 1 saturate It varies the intensity or saturation of a color in the element. 2 desaturate It decreases the intensity or saturation of a color in the element. 3 lighten It increases the lightness of a color in the element. 4 darken It varies the intensity or saturation of a color in the element. 5 fadein It increases the opacity for selected elements. 6 fadeout It decreases the opacity for selected elements. 7 fade It is used to set the transparency of a color for selected elements. 8 spin It is used to rotate the angle of a color for selected elements. 9 mix It mixes the two colors along with the opacity. 10 tint It mixes the color with white as you decrease the proportion of the color. 11 shade It mixes the color with black as you decrease the proportion of the color. 12 greyscale It discards the saturation from a color in the selected elements. 13 contrast It sets the contrast for the colors in the element. Print Page Previous Next Advertisements ”;

LESS – Using Less In The Browser ”; Previous Next Less is used in the browser when you want to compile the Less file dynamically when needed and not on the serverside; this is because less is a large javascript file. To begin with, we need to add the LESS script to use LESS in the browser − <script src = “less.js”></script> To find the style tags on page, we need to add the following line on the page. It also creates the style tags with the compiled css. <link href = “styles.less” rel = “stylesheet/less” type = “text/css”/> Setting Options Before the script tag, options can be set on the less object programmatically. It will affect all the programmatic usage of less and the initial link tags. For instance, we can set option as followed − <script> less = { env: “development” }; </script> <script src = “less.js”></script> We can also set the option in another format on the script tag as specified below − <script> less = { env: “development” }; </script> <script src = “less.js” data-env = “development”></script> You can also add these options to the link tags. <link data-dump-line-numbers = “all” data-global-vars = ”{ “var”: “#fff”, “str”: “”quoted”” }” rel = “stylesheet/less” type = “text/css” href = “less/style.less”> The points that need to be considered for attribute options are − window.less < script tag < link tag are the importance level. The data attributes cannot be written in camel case; the link tag option are represented as time options. The data attributes with non-string values should be JSON valid. Watch Mode The watch mode can be enabled by setting the env option to development and call the less.watch() after the less.js file is added. If you want the watch mode to be enabled on a temporary basis, then add #!watch to the URL. <script>less = { env: ”development”};</script> <script src = “less.js”></script> <script>less.watch();</script> Modify Variables Run time modification of LESS variable is enabled. LESS file is recompiled when new value is called. The following code shows the basic usage of modify variables − less.modifyVars({ ”@buttonFace”: ”#eee”, ”@buttonText”: ”#fff” }); Debugging We can add the option !dumpLineNumbers:mediaquery to the url or dumpLineNumbers option as mentioned above. The mediaquery option can be used with FireLESS(It display the original LESS file name and line number of LESS-generated CSS styles.) Options Before loading the script file less.js, options have to be set in a global less object. <script> less = { env: “development”, logLevel: 2, async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: “comments”, relativeUrls: false, globalVars: { var1: ””string value””, var2: ”regular value” }, rootpath: “:/a.com/” }; </script> <script src = “less.js”></script> async − It is a Boolean type. The imported files are requested whether with the option async or not. By default, it is false. dumpLineNumbers − It is a string type. In the output css file, the source line information is added when the dumpLineNumbers is set. It helps in debugging the particular rule came from. env − It is a string type. The env may run on development or production. Development is set automatically when the document URL starts with file:// or it is present in your local machine. errorReporting − When the compilation fails, the error reporting method can be set. fileAsync − It is a Boolean type. When a page is present with a file protocol then it can request whether to import asynchronously or not. functions − It is object type. logLevel − It is a number type. It displays the logging level in the javascript console. 2 : Information and errors 1 : Errors 0 : Nothing poll − In the watch mode, the time displays in milliseconds between the polls. It is an integer type; by default, it is set to 1000. relativeUrls − The URLs adjust to be relative; by default, this option is set as false. This means that the URLs are relative already to the entry less file. It is a Boolean type. globalVars − Inserts the list of global variables into the code. The string type variable should be included in quotes modifyVars − It is unlike the global variable option. It moves the declaration at the end of your less file. rootpath − It sets paths at the start of every URL resource. useFileCache − Uses per session file cache. The cache in less files is used to call the modifyVars where all the less files will not retrieve again. Print Page Previous Next Advertisements ”;

Discuss LESS ”; Previous Next LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for website. LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly. Print Page Previous Next Advertisements ”;

LESS – Programmatic Usage ”; Previous Next The main point of programmatic usage in the LESS is less.render function. This function uses the following format in LESS − less.render(input_data, options) .then(function(output) { //code here }, function(error) { }); the function can also be written in the following way − less.render(css, options, function(error, output) {}) The options is an optional argument which returns a promise when you don”t specify the callback and returns a promise when you specify the callback. You can display the file by reading it into string and set the filename fields of the main file. The sourceMap option allows to set sourcemap options such as sourceMapURL, sourceMapBasepath, sourceMapRootpath, outputSourceFiles and sourceMapFileInline. The point that needs to be considered here is that the sourceMap option is not available for the less.js. You can gain access to the log by adding a listener as shown in the below format − less.logger.addListener({ debug: function(message) { }, info: function(message) { }, warn: function(message) { }, error: function(message) { } }); The above defined functions are optional. If an error is displayed, then it will pass the error to callback or promise present in the less.render. Print Page Previous Next Advertisements ”;