This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

LESS is a CSS preprocessor, which introduces variables, mixins, calculations, and functions based on the CSS syntax, greatly simplifying the writing of CSS and reducing the maintenance cost of CSS. This series is all about learning and consolidating the basics of Less and mastering some more advanced uses to improve development efficiency.

Preliminary review

Less the first phase of the study guide | nesting and variable less | phase ii of the study guide operation and less the built-in function study guide 3) [important] | mixed and inheritance

Conditional expression


When keyword (if) (v1.5.0)

Conditional expressions: we use the comparison operator or the judgment expression in less to input our values and output different values based on different conditions.

To simulate if

Use the comparison operator

Comparison operators:

  • Is greater than>
  • Less than<
  • Is equal to the=
  • Greater than or equal to> =
  • Less than or equal to= <

Note :(=) can be used to compare [numbers], [strings], [identifiers], etc. Others can only be used with numbers;

Example:

Suppose you have a requirement that you want to have different colors for your headings. You want the main headings to be uniform [black] and the subheadings to be uniform [gray], and you know that the main headings are at least 20px.

Code implementation

Using check functions

1) Type checking function

Functions can be matched based on merit types

The basic type checking functions are Iscolor, Isnumber, isString, iskeyword, isURL, isURL

These check functions are built-in to πŸ‘‰less

Judge as follows

  • If the argument is [string], the background is [black];
  • If the parameter is [number], the background is [white];

2) Unit checking function

Checks whether a value is a specific unit

The basic unit check functions are ispixel, isPercentage, ISEM, isunit.

These functions are built-in to πŸ‘‰less

Judge as follows:

  • If the unit is px, the background is black.
  • If the unit is [%], the background is [white].

Logical operator

  • () () quite in JS | |, as long as one of the conditions will be implemented

For example, when executing.size, the first argument passed is 100px [or] the second argument is 100px

.size(@width,@height) when (@width = 100px),(@height = 100px){}
Copy the code

  • ()and() is equivalent to && in JS, only when all the conditions are met

For example: when executing.size, the first argument passed is 100px [and] the second argument is 100px

.size(@width,@height) when (@width = 100px) and (@height = 100px){}
Copy the code

  • The not operator corresponds to the non-operation!, the execution will be performed only if the condition is not met

For example: All @width passes to size that are not 100px are executed;

Student: Variable and mixture

Using the combination of variables and mixing, we can realize the [condition judgment] of [multiple style classes];

For example, if @variable is set, mix. The two classes in demo(), it is best to compile only style2

If you don’t know why @variable ends up with b, go back to πŸ‘‰

The default function (else)

The default() function forms a complement to an already created Mixins condition.

Can be used to simulate else

For example: default() is equivalent to @width <= 10%

.size(@width) when (@width > 10%){color:red; } .size(@width) when (default()){color:#333333; }Copy the code

If keyword (v3.0.0)

Prior to v3.0.0, less had always used WHEN for conditional judgment. If keyword [published in] v3.0.0 [Updated in] v3.6.0

Returns one of two values based on a condition.

Parameters:

  • condition: Boolean expression
  • value1If:conditionIf true, a value is returned.
  • value2If:conditionIf not, a value is returned.

Note: Boolean expressions supported as conditional arguments are the same as Guard Statements.

div { margin: if(not (true), 30px, 10px); color: if((true) and (2 > 1), red, black); background:if((false) or (isstring("boo!" )), red, black); }Copy the code

Note: Prior to version 3.6, this condition required a set of parentheses, otherwise an error would be reported.

if(2 > 1, blue, green); Causes an error in 3.0-3.5.3 if((2 > 1), blue, green); 3.0 + / / OkCopy the code

Boolean keyword (v3.0.0)

[Published in] v3.0.0 [Updated in] v3.6.0

Evaluation true or false

You can store a Boolean expression as a variable for later judgment in Guard or if().

Parameters:

  • condition: Boolean expression
@bg: rgb(10.200.30);
@bg-light: boolean(luma(@bg) > 50%);
div {
  background: @bg; 
  color: if(@bg-light, black, white);
}
Copy the code

Luma extracts the percentage of brightness (@color) from the color value and returns the value: percentage 0-100%

Looping statements

In other programming languages we use the for loop structure to implement the loop structure.

In Less, however, there is no such syntax. Instead, recursive loops are implemented by calling itself.

At the same time, we need to use the conditional judgment we learned earlier to break out of the loop.

Call yourself recursively

A simple example

W. (@ counter) when (@ counter > 0) {/ / recursively calls itself w. ((@ counter - 1)); Width :(10px * @counter); } div{/* call the loop */.w(5); }Copy the code

Practical example: Create a CSS grid using recursive loops;

.loop-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .loop-columns(@n, (@i + 1));
}
.loop-columns(4);
Copy the code

The sample analysis

  • Mixed loop-columns take two parameters @n and @i. And set the default value for @i to 1
  • @n=4, @i= the default value 1
  • Call itself in itself, let @ I increment
  • When indicates that the execution is stopped when @i<=@n

Practical example 2: You can set some CSS defaults, such as some padding.

userange ε’Œ eachTo create aforLoop (v3.9.0)

Less V3.9.0 is required

You can simply simulate a for loop by generating a list of numbers and expanding it into a rule set with an each list of numbers

each(range(4), { .col-@{value} { height: (@value * 50px); }});Copy the code

Each (v3.7.0)

Bind the value of the rule set to each member of the list.

Parameters

  • list– A list of values separated by commas or Spaces.
  • rules– Anonymous rule set/blend

Each list member can be bound to @value, @key, and @index by default. For most lists, @key and @index are defined to be the same value (such as an ordered list starting with 1). However, you can also customize the @key value in the list with rules.

Website sample

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}
Copy the code

Set class names in batches

@selectors: div, span, p; each(@selectors, { .sel-@{value} { background: #cccccc; }});Copy the code

Set font-size in batches

/** Define objects to iterate over */ @list: {4px; 5: 5px; 8: 8px; 10: 10px; 12: 12px; } each(@List, { .fs-@{key} { font-size: @value; }});Copy the code

Batch Set color

@colors: { info: #eee; danger: #f00; } each(@colors, { .text-@{key}{ color: @value; }});Copy the code

ineach()To set the variable name

You don’t have to use @value, @key, and @index as variable names in each of the each() functions.

In Less 3.7, Less introduced the concept of anonymous blending through the each() function, which may be extended to other parts of the syntax at a later date.

Anonymous mixins use the form #() or.() (beginning with). Or # just like regular mixins

The each() function takes the names of variables in the indefinite arguments and assigns them to the values of @value, @key, and @index in that order. If you just write each(@list,.(@value){}), then both @key and @index will become undefined

@colors: { info: #eee; danger: #f00; } each(@colors,.(@v,@k,@i) { .text-@{k}{ color: @v; }});Copy the code

Range (v3.9.0)

Generates a list spanning a series of values.

Parameters

  • start– (Optional) Start value,Let’s say 1 or 1px
  • end– the valueLet’s say 5 pixels
  • step– (Optional) The number to be added

Example: This example is just for printing out the values and is meaningless

The output for each value in the range will use the same units as the end value

conclusion

Next up: the less the 5th issue of study guide | * * * * *

Less default less if less booleane less each less range

πŸƒβ™€οΈπŸƒβ™€οΈπŸƒ πŸƒ ♀ ️ πŸƒ ♀ ️ πŸƒ ♀ ️