Category: less

LESS – Math Functions ”; Previous Next Description Math functions includes methods which are used for performing numeric operations such as round, square root, power value, modulus, percentage, etc. Following table shows Math Functions used in LESS − Sr.No. Function & Description Example 1 ceil It rounds up the number to next highest integer. ceil(0.7) it round the number to − 1 2 floor It rounds down the number to next lowest integer. floor(3.3) it round the number to − 3 3 percentage It transforms the floating point number to percentage string. percentage(0.2) it converts the number to percentage string as − 20% 4 round It rounds a floating point number. round(3.77) it converts the number to the rounding value as − 4 5 sqrt It returns the square root of a number. sqrt(25) it defines the square root of a number as − 5 6 abs It provides the absolute value of a number. abs(30ft) it displays the absolute value as − 30ft 7 sin It returns radians on numbers. sin(2) it calculates the sine value as − 0.90929742682 8 asin It specifies arcsine (inverse of sine) of a number which returns value between -pi/2 and pi/2. asin(1) it calculates the asin value as − 1.5707963267948966 9 cos It returns cosine of the specified value and determines radians on numbers without units. cos(2) it calculates the cos value as − -0.4161468365471424 10 acos It specifies arccosine (inverse of cosine) of a number which returns value between 0 and pi. acos(1) it calculates the acos value as − 0 11 tan It specifies tangent of the number. tan(60) it calculates the tan value as − 0.320040389379563 12 atan It specifies arctangent (inverse of tangent) of a specified number. atan(1) it displays atan value as − 0.7853981633974483 13 pi It returns the pi value. pi() it determines the pi value as − 3.141592653589793 14 pow It specifies the value of first argument raised to the power of second argument. pow(3,3) it specifies the power value as − 27 15 mod It returns modulus of first argument with respect to the second argument. It also handles negative and floating point numbers. mod(7,3) it returns the modulus value as − 1 16 min It specifies the smallest value of one or more arguments. min(70,30,45,20) it returns the minimum value as − 20 17 max It specifies the highest value of one or more arguments. max(70,30,45,20) it returns the maximum value as − 70 Print Page Previous Next Advertisements ”;

LESS – Mixins as Functions ”; Previous Next In this chapter, we will understand the importance of Mixins as Functions. Like functions, mixins can be nested, can accept parameters, and return values too. The following table demonstrates the use of mixins as functions in details. Sr.No. Mixins usage & Description 1 Mixin scope Mixins consist of variables; these can be used in caller”s scope and are visible. 2 Mixin and return values Mixins are similar to functions and the variables that are defined in a mixin will behave as the return values. 3 Mixin inside another mixin Whenever a mixin is defined inside another mixin, it can be used as return value too. Print Page Previous Next Advertisements ”;

LESS – Misc Functions ”; Previous Next Misc functions consist of a group of functions of a different kind. The following table lists all the types of misc functions − Sr.No. Functions & Description 1 color It is a string which represents colors. 2 image – size It is used to examine the dimension of the image from the file. 3 image – width It examines the width of the image from the file. 4 image – height It examines the height of the image from the file. 5 convert A number is converted from one unit to another. 6 data – uri Data uri is uniform resource identifier (URI) schema which gets a resource inline on webpages. 7 default Default function returns true only when it is available inside the guard condition and does not match with any other mixin. 8 unit Default function returns true only when it is available inside the guard condition and does not match with any other mixin 9 get – unit get – unit function returns its unit where the argument is present with number and units. 10 svg – gradient svg-gradient is a transition of one color to another. It can add many colors to the same element. Print Page Previous Next Advertisements ”;

LESS – GUIs ”; Previous Next In this chapter, we will understand the GUIs for LESS. You can use different LESS tools for your platform. For command line usage and tools click this link. The following table lists the GUI compilers that supports cross platform. Sr.No. Tools & Description 1 Crunch 2! It supports across platforms like Windows, Mac and Linux. It provides editor with integrated compiling. 2 Mixture It is a rapid prototyping and static site generation tool used by designers and developers. It is quick, efficient and works well with your editor. It brings together a collection of awesome tools and best practices. 3 SimpLESS It is a minimalistic LESS compiler. It provides drag, drop and compile functionality. SimpLESS supports prefixing your CSS by using prefixr which is the unique feature of SimpLESS. It is built on Titanium platform. 4 Koala It is used to compile LESS, SASS and CoffeeScript. It provides features like compile error notification supports and compile options supports. The following table lists the GUI compilers that support Windows platform. Sr.No. Tools & Description 1 Prepros It a tool that compiles LESS, SASS, Compass, Stylus, Jade and many more. 2 WinLess Initially it was a clone of LESS.app, it has several settings and takes more feature complete approach. It supports starting with command line arguments. The following table lists the GUI compilers that supports OS X platform. Sr.No. Tools & Description 1 CodeKit t is successor of LESS.app and supports LESS among many other processing languages like SASS, Jade, Markdown and more. 2 LiveReload It edits CSS and changes images instantly. SASS, LESS, CoffeeScript and others work well. The following table lists the GUI compilers that supports OS X platform. Sr.No. Tools & Description 1 Plessc It is gui frontend for lessc. It has features like log viewer, auto compile, opening the LESS file with the chosen editor and sourcemap support. Print Page Previous Next Advertisements ”;

LESS – Color Channel Functions ”; Previous Next In this chapter, we will understand the importance of Color Channel Functions in LESS. LESS supports few in-built functions which set value about a channel. The channel set the value depending on the color definition. The HSL colors have hue, saturation and lightness channel and the RGB color have red, green and blue channel. The following table lists out all the color channel functions − Sr.No. Function & Description Example 1 hue In HSL color space, the hue channel is extracted off the color object. background: hue(hsl(75, 90%, 30%)); It compiles in the CSS as shown below − background: 75; 2 saturation In HSL color space, the saturation channel is extracted off the color object. background: saturation(hsl(75, 90%, 30%)); It compiles in the CSS as shown below − background: 90%; 3 lightness In HSL color space, the lightness channel is extracted off the color object. background: lightness(hsl(75, 90%, 30%)); It compiles in the CSS as shown below − background: 30%; 4 hsvhue In HSV color space, the hue channel is extracted off the color object. background: hsvhue(hsv(75, 90%, 30%)); It compiles in the CSS as shown below − background: 75; 5 hsvsaturation In HSL color space, the saturation channel is extracted off the color object. background: hsvsaturation(hsv(75, 90%, 30%)); It compiles in the CSS as shown below − background: 90%; 6 hsvvalue In HSL color space, the value channel is extracted off the color object. background: hsvvalue(hsv(75, 90%, 30%)); It compiles in the CSS as shown below − background: 30%; 7 red The red channel is extracted off the color object. background: red(rgb(5, 15, 25)); It compiles in the CSS as shown below − background: 5; 8 green The green channel is extracted off the color object. background: green(rgb(5, 15, 25)); It compiles in the CSS as shown below − background: 15; 9 blue The blue channel is extracted off the color object. background: blue(rgb(5, 15, 25)); It compiles in the CSS as shown below − background: 25; 10 alpha The alpha channel is extracted off the color object. background: alpha(rgba(5, 15, 25, 1.5)); It compiles in the CSS as shown below − background: 2; 11 luma luma value is calculated off a color object. background: luma(rgb(50, 250, 150)); It compiles in the CSS as shown below − background: 71.2513323%; 12 luminance The luma value is calculated without gamma correction. background: luminance(rgb(50, 250, 150)); It compiles in the CSS as shown below − background: 78.53333333%; Print Page Previous Next Advertisements ”;

LESS – Mixin Guards ”; Previous Next Description If you want to match simple values or number of arguments on expressions, then you can make use of guards. It is associated with mixin declaration and includes condition that is attached to a mixin. Each mixin will have one or more guards which are separated by comma; a guard must be enclosed within parentheses. LESS uses guarded mixins instead of if/else statements and performs calculations to specify matched mixin. The following table describes the different types of mixins guards along with description. Sr.No. Types & Description 1 Guard Comparison Operators You can use the comparison operator (=) to compare numbers, strings, identifiers, etc. 2 Guard Logical Operators You can use the and keyword to work around logical operators with guards. 3 Type Checking Functions It contains the built-in functions to determine the value types for matching mixins. 4 Conditional Mixins LESS uses the default function to match mixin with other mixing matches. Example The following example demonstrates the use of mixin guards in the LESS file − <!doctype html> <head> <title>Mixin Guards</title> <link rel = “stylesheet” href = “style.css” type = “text/css” /> </head> <body> <h2>Example of Mixin Guards</h2> <p class = “class1”>Hello World…</p> <p class = “class2″>Welcome to Tutorialspoint…</p> </body> </html> Now, create the style.less file. style.less .mixin (@a) when (lightness(@a) >= 50%) { font-size: 14px; } .mixin (@a) when (lightness(@a) < 50%) { font-size: 16px; } .mixin (@a) { color: @a; } .class1 { .mixin(#FF0000) } .class2 { .mixin(#555) } You can compile the style.less 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 .class1 { font-size: 14px; color: #FF0000; } .class2 { font-size: 16px; color: #555; } Output Follow these steps to see how the above code works − Save the above html code in the mixin-guard.html file. Open this HTML file in a browser, the following output will get displayed. Print Page Previous Next Advertisements ”;

LESS – Browser support ”; Previous Next LESS is cross-browser friendly. It supports modern browsers such as Google Chrome, Mozilla Firefox, Safari and Internet Explorer and allows reusing CSS elements and write LESS code with the same semantics. You must be careful about the performance implications while using LESS on the client side and while displaying the JavaScript to avoid any cosmetic issues such as Spelling mistakes, Color changes, Texture Look Links, etc. Compile the LESS files on the server side to improve the performance levels of the website. PhantomJS does not implement Function.prototype.bind function, so you need to use es5 shim JavaScript engine to run under PhantomJS. Users can make adjustments with variables to affect the theme and show them in real time by using the client side LESS in the production. If you want to run LESS in older browsers, then use the es-5 shim JavaScript engine which adds JavaScript features that LESS supports. You can use attributes on the script or link tags by using JSON.parse which must be supported by the browser. Print Page Previous Next Advertisements ”;

LESS – List Functions ”; Previous Next Description LESS consists of list functions which are used to specify length of the list and position of the value in the list. Following table lists the List functions used in LESS − Sr.No. Function & Description 1 Length It will take a comma or space separated list of values as parameter. 2 Extract It will return the value at a specified position in a list. Print Page Previous Next Advertisements ”;

LESS – String Functions ”; Previous Next Description Less supports some of the string functions as listed below − escape e % format replace The following table describes the above string functions along with description. Sr.No. Types & Description Example 1 Escape It encodes a string or information by using URL encoding on special characters. You could not encode some characters such as , , / , ? , @ , & , + , ~ , ! , $ , ” and some characters you can encode such as , # , ^ , ( , ) , { , } , : , > , < , ] , [ and =. escape(“Hello!! welcome to Tutorialspoint!”) It outputs escaped string as − Hello%21%21%20welcome%20to%20Tutorialspoint%21 2 e It is a string function which uses string as parameter and returns the information without quotes. It is a CSS escaping which uses ~”some content” escaped values and numbers as parameters. filter: e(“Hello!! welcome to Tutorialspoint!”); It outputs escaped string as − filter: Hello!! welcome to Tutorialspoint!; 3 % format This function formats a string. It can be written with the following format − %(string, arguments …) format-a-d: %(“myvalues: %a myfile: %d”, 2 + 3, “mydir/less_demo.less”); It outputs the formatted string as − format-a-d: “myvalues: 5 myfile: “mydir/less_demo.less””; 4 replace It is used to replace the text within a string. It uses some parameters − string − It searches the string and replace in. pattern − It searches the regular expression pattern. replacement − It replaces the string that matches the pattern. flags − These are optional regular expression flags. replace(“Welcome, val?”, “val?”, “to Tutorialspoint!”); It replaces the string as − “Welcome, to Tutorialspoint!” Print Page Previous Next Advertisements ”;

LESS – Parent Selectors ”; Previous Next In this chapter, let us understand how Parent Selectors work. It is possible to reference the parent selector by using the &(ampersand) operator. Parent selectors of a nested rule is represented by the & operator and is used when applying a modifying class or pseudo class to an existing selector. The following table shows the types of parent selector − Sr.No. Types & Description 1 Multiple & The & will represent the nearest selector and also all the parent selectors. 2 Changing Selector Order Prepending a selector to the inherited (parent) selectors is useful when selector ordering is changed. 3 Combinatorial Explosion The & can also produce all the possible permutation of selectors in a list separated by commas. Example The following example demonstrates the use of parent selector in the LESS file − <!doctype html> <head> <link rel = “stylesheet” href = “style.css” type = “text/css” /> <title>Parent Selector</title> </head> <body> <h2>Welcome to TutorialsPoint</h2> <ul> <li><a>SASS</a></li> <li><a>LESS</a></li> </ul> </body> </html> Next, create the style.less file. style.less a { color: #5882FA; &:hover { background-color: #A9F5F2; } } 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 a { color: #5882FA; } a:hover { background-color: red; } In the above example, & refers to selector a. Output Follow these steps to see how the above code works − Save the above html code in the parent_selector1.htm file. Open this HTML file in a browser, the following output will get displayed. The Parent selectors operator has many uses like, when you need to combine the nested rule”s selectors in other way than the default. Another typical use of & is to generate class names repeatedly. For more information click here. Print Page Previous Next Advertisements ”;