directory

Less grammar
- annotation
- Variables (rules, usage)
- Minxin mixed with
  - The name of the class with
  - Function with
  - Functions with arguments are mixed in
- nested
- Import (reference)
- Functions (built-in functions and operations)
  - Less defines functions
  - Built-in function
    - String function
    - Synthetic class function
    - The arithmetic function
    - The color function
    - Judging function

The syntax of Less is as follows: 1. The syntax of Less is as follows: the syntax of Less is as follows:

Less grammar

annotation

/ * * /This annotation can be used in CSS or less
//This annotation can be used in less, but there is no way to compile this type of annotation because CSS does not support itcssIn the file

Variable

Variables allow us to define a set of generic styles that can be called when needed, so that we only need to modify the global variable, which is very convenient.
Rules:lessVariable to@The prefix cannot start with a number or contain special characters.
Use:

/* defines a variable */
@mainColor:#ff4400;
/* Use the variable */
a:hover{
  color:@mainColor;
}

p{
  border: 1px solid @mainColor;
}

/* You can concatenate variables */
@left:left;
/* Wrap curly braces around */
border-@{left}: 1px solid @mainColor;
Copy the code

Mixins with

What is mixin? This is something you see a lot in Bootstrap. Mixin can easily introduce A defined class A into class B, so that class B inherits all the attributes of class A. When you define it, you need to dot it.

The name of the class with

So if I define a button1, and I have some properties in the button, and I have a button2 somewhere else, and I want to add the properties of that button1 and some other properties, if I have to rewrite it the way CSS works, THEN I can mix it in with Less. Here’s the code:

/* Some properties of the original button and other properties */
.button1{
    width:200px;
    height: 50px;
    background: #fff;
}

.btn_border{
    border: 1px solid #ccc;
}

.btn_danger{
    background: red;
}

.btn_block{
    display: block;
    width: 100%;
}

/* Mix the styles of CSS classes */
.button2{
    .button1(a);.btn_border(a);.btn_danger(a);.btn_block(a); }Copy the code

Function with

There are some bad things about the mixin above, but it is still compiled in button2. Everything in button1 is compiled in button2, but it is written succinctly. This is where you can mix in functions. (Detailed function knowledge is written later)

.button1() {width:200px;
    height:200px;
    background: #fff;
}

.btn_border() {border:1px solid #ccc;
}

.button2{
    .button1(a);.btn_border(a); }Copy the code

This way.button1 and.btn_border are not displayed in the CSS file, reducing code redundancy in the CSS. But what if I want to change the exact value of the style? It’s parameters

Functions with arguments are mixed in

If there is no default value, the call must pass a value as follows:

/* less will return an error */ if no value is passed
.btn_border(@len) {border:1px solid #ccc;
}

.btn_b{
    .btn(a);.btn_border(a); }Copy the code

Two solutions

1. Pass in default values at definition time

/*1. Pass the default value */ at definition time
.btn_border(@len:10px) {border:1px solid #ccc;
    border-radius:@len;
}

.btn_b{
    .btn(a);.btn_border(a); }/* The final border-radius is 10px*/
.btn_b{
    .btn(a);.btn_border(20px);
}
/* If a parameter is passed in, the final value is 20px*/
Copy the code

2. There is no default value when defining, and the value is passed in when calling

.btn_border(@len){
    border:1px solid #ccc;
    border-radius:@len;
    -webkit-border-radius:@len;
    -moz-border-radius:@len;
    -ms-border-radius:@len;
    -o-border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border(10px);
}
Copy the code

nested

Nesting enhances the hierarchy of the code, and we can also implement inheritance through nesting, which greatly reduces the amount of code and makes the amount of code look cleaner.

.nav{
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    color:# 666;
    a {
        color:# 666;
    }
    > .container{
        line-height: 40px;
        text-align: center;
        > div{
        height:40px;
            ~ div{
            border-left:1px solid #ccc; }}}}Copy the code

This time to pay attention to a problem, that is, if you write pseudo-elements, intersection selector, there will be a problem, write directly in the middle of the nested will default space. So how do you put it together?

/* This is how to write pseudo-elements and intersection selectors, preceded by &*/
.nav{
      font-size:12px;
      &:hover{
            text-decoration:none;
      }
      &::before{
            content:""; }}Copy the code

Import (reference)

When using less to write files, you can write a module of less, but the index. HTML to reference so many less files is not appropriate, this time to establish a total less, this is a decoupled development idea, “high cohesion, low coupling”.

Let’s sort out the structure:

< modules needed in less >

variable
function
Functional modules (depending on your situation)
Total (reference variable, function, function module)

It is first introduced in index.less

/*index.less*/
@import "variable.less";      /* Introduces the variable, which can be followed by the suffix */
@import "mixin.less";         /* Introduces the function */
@import "topBar.less";        /* Import function module 1*/
@import  "navBar.less";       /* Introduce function module 2*/
Copy the code

In index. HTML, you need to introduce an index.less value

Functions (built-in functions and operations)

There are two ways to define functions in JS

function fun(){ }

var fun = function(){ }

Less defines functions

Direct operation

a{
    color:red/2;     /* The result is #800000*/
}

li{
    width:100%/7;  /* Each LI label is 1/7 the width of ul */
}
Copy the code

It’s defined at the beginning, and it’s defined when it’s used. The function name ()

.a(@len:12) {width:100%/@len;
    color:lighten(#ddd.10%);   /* Brightness increases by 10%, resulting in # f7F7f7 */
}

col-xs-1{
    .a(a); }Copy the code

Built-in function

There’s a function manual

Note: functions with * are only available in 1.4.0 beta and above!!

String function

escape(@string); / / byURL-encodingEncoding string
e(@string); // Escape the string
%(@string, values...) ;// Format a string

Synthetic class function

unit(@dimension, [@unit: ""]);// Remove or replace units of attribute values
color(@string);// Parse the string into a color value
* data-uri([mimetype,] url); // *Embed the resource tocssIn, maybe back tourl()

The arithmetic function

ceil(@number);// round up
floor(@number);// round down
percentage(@number);// Convert numbers to percentages, for example0.5 - > 50%
round(number, [places: 0]);// Round up (the second is precision)
* sqrt(number);// Calculate the square root of the number.
* abs(number);// The absolute value of a number (the argument can take units)
* sin(number); // sinFunction (no default radian value in units)

sin(1deg);   // Sine of 1 Angle 0.01745240643728351
sin(1grad);  // Sine of 1 degree Angle 0.015707317311820675
/* The gradient is the division of a circle into 400 parts, each gradian, grad*/
Copy the code

* asin(number); // arcsinfunction
- parameter- 1to1Floating point number between, return value in radians, interval between-PI/2 到 PI/2Between, out of range outputNaNrad
* cos(number); // cosfunction
- withsinFunction the same
* acos(number); // arccosfunction
- parameter- 1to1Floating point number between, return value in radians, interval between0 在 PIBetween, out of range outputNaNrad
* tan(number); // tanfunction
- withsinFunction the same
* artan(number); // arctanfunction
- The return value ranges from-PI/2 到 PI/2Between, the rest andarsinThe same
* pi();/ / returnPI
* pow(@base, @exponent);/ / return@basethe@exponentTo the power
- The return value and@baseIf there are identical units, the second unit is ignored and returned without conforming to the ruleNaN
* mod(number, number);// The first argument mod the second argument
- The return value is the same as the unit of the first argument, and can handle negative numbers and floating-point numbers
* convert(number, units);// Convert between numbers
* unit(number, units);// Replace units of numbers without conversion

The color function

color(string);// Convert strings or escaped values to colors
- See synthesis function
rgb(@r, @g, @b);// Convert to a color value
- Parameters are integers0-255.Percentage,0-100%Convert to hexadecimal
rgba(@r, @g, @b, @a);// Convert to a color value
- The first three parameters are integers0-255.Percentage,0-100%The fourth is0-1Or percentage0-100%.
argb(@color);/ / create#AARRGGBBFormat the color value
- Used in theIEIn the filter, and.NETandAndroidThe development of
hsl(@hue, @saturation, @lightness);// Create a color value
- By hue, saturation, brightness three values
- @hue: an integer0-360.Said degree
- @saturationThe percentage:0-100%Or digital0-1
- @lightnessThe percentage:0-100%Or digital0-1
- Returns the hexadecimal color value

/* This is handy if you want to use one color to create another */
@new: hsl(hue(@old),45%.90%);

/* Here @new will use @old's hue value, along with its own saturation and brightness */
Copy the code

hsla(@hue, @saturation, @lightness, @alpha);// Create a color value
hsv(@hue, @saturation, @value);// Create a color value
- @hueRepresents hue, integer0-360.Said degree
- @saturationIt’s saturation, percentage0-100%Or digital0-1
- @valueHue, percentage0-100%Or digital0-1
- Creates an opaque color object

hsv(90.100%.50%)

/ / o # 408000
Copy the code

hsva(@hue, @saturation, @value, @alpha);// Create a color value
hue(@color);// Extract from the color valuehueValue (hue)
- The return value0-360.The integer

hue(hsl(90.100%.50%))

/ / output 90
Copy the code

saturation(@color);// Extract from the color valuesaturationValue (saturation)
- Return value percentage0-100.

saturation(hsl(90.100%.50%))

/ / output by 100%
Copy the code

lightness(@color);// Extract from the color value'lightness'Value (brightness)
- return0-100.Percentage value of

lightness(hsl(90.100%.50%))

/ / output by 50%
Copy the code

* hsvhue(@color);// Extract from colorhueValue toHSVColor space representation (hue)
- return0-360.The integer
* hsvsaturation(@color);// Extract from colorsaturationValue toHSVColor space representation (Saturation)
- return0-100.The percentage
* hsvvalue(@color);// Extract from colorvalueValue toHSVColor space representation (tone)
- return0-100.The percentage
red(@color);// Extract from the color value'red'Value (red)
- Returns an integer0-255.
green(@color);// Extract from the color value'green'Value (green)
- Returns an integer0-255.
blue(@color);// Extract from the color value'blue'Value (blue)
- Returns an integer0-255.
alpha(@color);// Extract from the color value'alpha'Value (transparency)
- Return floating point0-1
luma(@color);// Extract from the color value'luma'Value (percentage of brightness)
- Return percentage0-100%

Color Operations

There are several points to note in color value calculation:

Parameters must be in the same unit/format

Percentages will be treated as absolute values,10%increase10%, it is20%Rather than11%

Parameter values must be within a limited range

Returns a value in a simplified format except hexadecimal

saturate(@color, 10%);// Saturation increases10%
desaturate(@color, 10%);// Saturation decreases10%
lighten(@color, 10%);// Brightness increases10%
darken(@color, 10%);// Brightness decreases10%
fadein(@color, 10%);// Opacity is increased10%And more opaque
fadeout(@color, 10%);// The opacity is reduced10%And more transparent
fade(@color, 50%);// Set transparency to50%
spin(@color, 10);// The hue value increases10
- Rotate the hue Angle of the color in any direction0-360., will continue to rotate from the starting point, such as rotation360and720It’s the same result.
- It’s important to note that the color goes throughRGBThis process does not preserve the hue value of the gray (gray has no saturation and the hue value is meaningless), so the hue value of the color is preserved by the function
- Because the color value is always printed asRGBFormat, thereforespin()Function has no effect on gray
mix(@color1, @color2, [@weight: 50%]);// Mix the two colors
- The third parameter is the percentage to balance the two colors, which is the default50%
greyscale(@color);// Remove saturation completely and output grey
- withdesaturate(@color, 100%)The effect is the same
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);/ / if@color1 的 lumaValue >43%The output@darkcolor, otherwise output@lightcolor
- It’s a color comparison, it’s a little bit more complicated, and we’ll talk about it when we use it

Color blending (Color blending)

Color blending modes are similar to the layer blending modes of image editors Photoshop, Firework, or GIMP, so the same color blending modes used to create.psd files can be applied to CSS.

multiply(@color1, @color2);
- Put the two colors separatelyRGBMultiply the three values and divide by them255The output is a darker color
- The correspondingps“Darken/Multiply” in
screen(@color1, @color2);
- The result is a brighter color, corresponding tops“Lighten/filter” in
overlay(@color1, @color2);
- Combine the effects of the previous two functions to make the shallow one shallower and the deep one deeper, similar topsSuperposition in
- The first argument is the superimposed object, and the second argument is the color to be superimposed
softlight(@color1, @color2);
- withoverlayThe effect is similar, except that when pure black and pure white are used as parameters, the output result is not pure black and white, corresponding tops“Soft Light” in
- The first parameter is the blending color (light source) and the second parameter is the color to be blended
hardlight(@color1, @color2);
- withoverlayThe effect is similar, but the second color parameter determines the brightness or blackness of the output color, corresponding topsBright light/bright light/linear light/dot light
- The first parameter is the blending color (light source) and the second parameter is the color to be blended
difference(@color1, @color2);
- Subtracting the second color from the first color value, the output is a darker color, corresponding tops“Difference/exclusion” in
- The first argument is the subtracted color object, and the second argument is the subtracted color object
exclusion(@color1, @color2);
- Effect anddifferenceThe function is similar, but the output is less different,ps“Difference/exclusion” in
- The first argument is the subtracted color object, and the second argument is the subtracted color object
average(@color1, @color2);/ / forRGBAverage the three colors
negation(@color1, @color2);
- anddifferenceThe function does the opposite, producing a brighter color
- Note: doing the opposite does not mean doing the addition
- The first argument is the subtracted color object, and the second argument is the subtracted color object

Judging function

iscolor(@colorOrAnything);// Determine if a value is a color
isnumber(@numberOrAnything);// Check whether a value is a number (can contain units)
isstring(@stringOrAnything);// Determine if a value is a string
iskeyword(@keywordOrAnything);// Determine if a value is a keyword
isurl(@urlOrAnything);// Check whether a value isurl
ispixel(@pixelOrAnything);// Check whether a value is apxIs the value of the unit
ispercentage(@percentageOrAnything);// Determine if a value is a percentage
isem(@emOrAnything);// Check whether a value is aemIs the value of the unit
* isunit(@numberOrAnything, "rem");// Check whether a value is the value of the specified unit

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Less(two) — Basic grammar

directory

Less grammar

annotation

Variable

Mixins with

The name of the class with

Function with

Functions with arguments are mixed in

nested

Import (reference)

Functions (built-in functions and operations)

Less defines functions

Built-in function

String function

Synthetic class function

The arithmetic function

The color function

Color Operations

Color blending (Color blending)

Judging function

Less(two) — Basic grammar

directory

Less grammar

annotation

Variable

Mixins with

The name of the class with

Function with

Functions with arguments are mixed in

nested

Import (reference)

Functions (built-in functions and operations)

Less defines functions

Built-in function

String function

Synthetic class function

The arithmetic function

The color function

Color Operations

Color blending (Color blending)

Judging function

Related Posts

Abused GUI design patterns

Find the maximum and minimum values of the array

React Hooks series 5 useCallback