Category: less

Aug 10

Less – Import Options

LESS – Import Options ”; Previous Next In this chapter, we will understand the importance of Import Options in LESS. LESS offers the @import statement that allows the style sheets to import both LESS and CSS style sheets. The following tables lists the import directives that will be implemented in the import statements. Sr.No. Import options & Description 1 reference It uses a LESS file only as reference and will not output it. 2 inline It enables you to copy your CSS into the output without being processed. 3 less It will treat the imported file as the regular LESS file, despite whatever may be the file extension. 4 css It will treat the imported file as the regular CSS file, despite whatever may be the file extension. 5 once It will import the file only one time. 6 multiple It will import the file multiple times. 7 optional It continues compiling even though the file to import is not found. More than one keyword is allowed to use in the @import statement, however you have to use commas to seperate the keywords. For instance − @import (less, optional) “custom.css”; Print Page Previous Next Advertisements ”;

Aug 10

Less – Operations

LESS – Operations ”; Previous Next Description LESS provides support for some arithmetical operations such as plus (+), minus (-), multiplication (*) and division (/) and they can operate on any number, color or variable. Operations save lot of time when you are using variables and you feel like working on simple mathematics. Example The following example demonstrates the use of operations in the LESS file − <html> <head> <title>Less Operations</title> <link rel = “stylesheet” type = “text/css” href = “style.css” /> </head> <body> <h1>Example using Operations</h1> <p class = “myclass”>LESS enables customizable, manageable and reusable style sheet for web site.</p> </body> </html> Next, create the file style.less. style.less @fontSize: 10px; .myclass { font-size: @fontSize * 2; color:green; } You can compile the style.less file to style.css by using the following command − lessc style.less style.css Execute the above command; it will create the style.css file automatically with the following code − style.css .myclass { font-size: 20px; color: green; } Output Follow these steps to see how the above code works − Save the above html code in the operations.html file. Open this HTML file in a browser, the following output will get displayed. Print Page Previous Next Advertisements ”;

Aug 10

Less – Home

LESS Tutorial PDF Version Quick Guide Resources Job Search Discussion 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. Audience This tutorial will help both students as well as professionals who want to make their websites or personal blogs more attractive. Prerequisites You should be familiar with − Basic word processing using any text editor. How to create directories and files. How to navigate through different directories. Internet browsing using popular browsers like Internet Explorer or Firefox. Developing simple webpages using HTML or XHTML. If you are new to HTML and XHTML, then we suggest you go through our HTML Tutorial or XHTML Tutorial first. Print Page Previous Next Advertisements ”;