Less
Less introduction
Less Yes A CSS preprocessing language, which expands the CSS language and adds features such as variables, mixins, and functions. Less can run on Node or browser.
Basic usage of Less
Note
// This is a single-line note /* This is a multi-line comment*/
Note: Single-line comments will not participate in preprocessing, only multi-line comments will participate in preprocessing.
variable
// The variable amount format defined in less: @variable name: variable value @width: 100px;/ / In less, you can also pass the value to the variable assignment @height: @width;
Note:
-
less There are also scope-related concepts in (). Those not in () are global variables; those in () are local variables, which can only be used in ()
-
< In em>less, only variables in the same scope will affect each other, and the later definition will override the first defined
- The value of the variable in less is subject to The principle of proximity
-
The variable loading in less is lazily loaded, and it can be called after writing it
Variable interpolation
In Less, either the variable name can be used to represent the attribute value, or the variable name can be used to represent the selector name and attribute name , But when expressing the selector name and attribute name, you need to enclose the variable with {}.
@d: div;@w: width;@h: height;@s: 100px;@{d}{ @{w}: @s; @{h}: @s;}
operation
In less, you can perform simple addition, subtraction, multiplication, and division operations just like the cale() function in css3.
@size: 200px;div{ width: @size * 2; height: @size / 2;}
mix
In less, you can extract the repeated code to form a separate class, and then put the class name where you need it, and the browser will copy the extracted class when the code is executed After that, place it where you need it.
// If you add () after the class name, that class will not be displayed after the less mixing process is completed, and if you do not add (), the class will not be displayed Will disappear. center(){ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }div{ .center();}
Mixed with formal parameters
In Less, you can pass parameters to the mix like JavaScript.
// You can specify default values when passing parameters. whc(@w: 100px, @h: 100px, @c: red){ width: @w; height: @h; background: @c;}div:nth-of-type(1){ .whc(200px, 200px, yellow);}div:nth-of-type(2){ .whc();}div:nth-of -type(3){ .whc(@c: yellow);}
Variable parameters in the mix
- In In the mix of Less, you can use
...to replace zero or more new parameters. The number of new parameters before...is the call The minimum number of actual parameters that need to be passed in during mixing. -
@argumentscan be used to accept all actual parameters in Less mix -
.animate (@name, @time, ...){ translation: @arguments;}
mixed matching mode
-
The variable defined after the mixing will overwrite the variable defined first, but the variable with the same name can be defined through or matching mode
-
Universal matching mode: regardless of matching In that mode, the code in the general mode must be executed first, and the matching symbol through the matching mode is
@_.tranBd(@w){ width: 0; height: 0; border-width: @w; border-style: solid; border-color: transparent;}.triangle(@_, @w, @c){ .tranBd(@w);}.triangle( top, @w, @c){ border-bottom-color: @c;}.triangle(bottom, @w, @c){ border-top-color: @c;}.triangle(right, @w, @ c){ border-left-color: @c;}.triangle(left, @w, @c){ border-right-color: @c;}
Import other Less files
You can use @import to import external Less files, The .less suffix of the file can be omitted.
@import'./css/triangle';
built-in function
Because of Less< The bottom layer of /em> is implemented with JavaScript, so some commonly used JS functions can also be implemented in Less.
image-size("file.jpg"); // => 100px 50pximage-width("file.jpg"); // => 100pximage-height("file. jpg"); // => 50px// Unit conversion convert(9s, "ms"); // => 9000msconvert(14cm, mm); // => 140mmconvert(8, mm); // => 8/ / List @list: "A", "B", C, "D";length(@list); // => 4extract(@list, 3); // => C*/// Mathematics/*ceil (2.1); // => 3 round up floor(2.1); // => 2 round down percentage(.3); // => 30% turn percentage round(1.67, 1); // = > 1.7 Round off and keep one decimal place sqrt(25cm); // => 5cm take the square root abs(-5cm); // => 5cm take the absolute value pi(); // => 3.141592653589793 Pi πmax(3px, 42px, 1px, 16px); // => 42pxmin(3px, 42px, 1px, 16px); // => 1px*/// String/*replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"*/// Judging the type/*isnumber(56px); // => whether true contains numbers isstring("string"); // => trueiscolor(#ff0); // => trueiscolor(blue); // => trueiskeyword(keyword); // => trueisurl(url(...)); // => trueispixel(56px); // => trueisem(7.8em); // = > trueispercentage(7.8%); // => trueisunit(4rem, rem); // => true is the specified unit isruleset(@rules); // => true is the variable*/// color operation/*increase Saturate(co lor, 20%) Decrease saturation desaturate(color, 20%) Increase brightness lighten(color, 20%) Decrease brightness darken(color, 20%) Decrease transparency fadein(color, 10%) Increase transparency fadeout(color, 10% ) Set the absolute opacity (override the original transparency) fade(color, 20%) rotate the hue angle spin(color, 10) to mix the two colors, and the opacity is included in the calculation. mix(#f00, #00f, 50%) and white mix tint(#007fff, 50%) and black mix shade(#007fff, 50%) grayscale, remove the saturation greyscale(color) returns the contrast of the color with the highest contrast (color1, color2)*/// Color mixing/*Multiply each RGB channel, then divide by 255 multiply(color1, color2); the opposite of multiply screen(color1, color2); make it lighter or darker overlay(color1 , color2) avoid too bright or too dark softlight(color1, color2) is the same as overlay, but the color exchange hardlight(color1, color2) calculates the average of the two colors on each channel (RGB) basis average(color1, color2) -->
hierarchical structure
// In less, if you add a selector inside a selector, Indicates that the two are hierarchical structures. .father{ .son{ // ... //In the less hierarchical structure, if you want to represent a pseudo-type selector of a selector, you can use &: selector name inside it. &:hover{ // ...}} // In the less hierarchical structure, if you want to represent a pseudo-element selector of a selector, you can use &:: selector name inside it. &::before{ // ... }}
Inheritance
The difference between inheritance and mixing:
< ul>
.center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} //Inherited format: The selector that needs to be inherited: extends (the inherited selector).father:extend(.center){ width: 400px; height: 400px; background: red; .son:extend(.center){ width: 200px; height: 200px; background: yellow; })
Condition Judgment
In less, you can add conditional judgments to the mix. The type can be:
- Comparison operator (=, >, <, >=, <=)
- Logical operator ((),() ()and() not())
- and built-in comparison function (isem ispixel …)
.size(@w, @h) when (@w >= 100px)and(@h >= 100px){ width: @w; height: @h;}div{. size(100px, 100px); background: red;}