Less installation and configuration

  • Install react-app-rewired, react-app-rewire-less, and babel-plugin-import plugins

    Execute command:

npm install react-app-rewired --save-dev
npm install react-app-rewire-less --save-dev
npm install babel-plugin-import --save-dev
Copy the code
  • Configure package.json to find the scripts property and change the start value to react-app-rewired start, as shown below:
  • Create the config-overrides. Js file in the root directory
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
     config = rewireLess.withLoaderOptions({
     modifyVars: { "@primary-color": "#9F35FF" },
})(config, env);
 return config;
}
Copy the code

Basic usage of less

LESS as a form of CSS extension, it does not emasculate CSS functions, but on the existing CSS syntax, add a lot of additional functions, understand the installation process, next look at the specific how to use LESS

variable
Using the @ symbol to define variables in less is easy to understand:Copy the code
@nice-blue: #5B83AD;
@light-blue: @nice-blue + # 111;
#header { color: @light-blue; }
Copy the code

The above code is compiled and output is as follows:

#header { color: #6c94be; }
Copy the code

Variable names can be defined as variables in LESS, for example:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
Copy the code

After the resolution:

content: "I am fnord.";
Copy the code

Note: Variables in LESS are completely ‘constant’, so you can only define them once

hybrid

In LESS we can define a set of generic attributes as one class and then call those attributes in another class. Here is a class like this:

.bordered {
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}
Copy the code

So if we now need to introduce those generic attribute sets in other classes, we can just call them in any class like this:

#menu a {
 color: # 111;
 .bordered;
}
.post a {
 color: red;
 .bordered;
}
Copy the code

Attribute styles in the.bordered class are represented in #menu A and.post A:

#menu a {
 color: # 111;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}
.post a {
 color: red;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}
Copy the code

Any CSS class, ID, or element attribute set can be introduced in the same way.

Parameter mixing

In LESS, you can also define a collection of attributes with parameters as functions:

.border-radius (@radius) {
 border-radius: @radius;
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
}
Copy the code

Then call it in another class like this:

#header {
 .border-radius(4px);
}
.button {
 .border-radius(6px); 
}
Copy the code

We can also set the parameters to default values like this:

.border-radius (@radius: 5px) {
 border-radius: @radius;
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
}
Copy the code

So now if we call it like this:

#header {
 .border-radius; 
}
Copy the code

Radius will have a value of 5px. You can also define a set of attributes with no arguments. If you want to hide this set of attributes from the CSS, but you want to reference it in other sets of attributes, you’ll find this method very useful:

.wrap () {
 text-wrap: wrap;
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 word-wrap: break-word;
}
pre { .wrap }
Copy the code

Output:

pre {
 text-wrap: wrap;
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 word-wrap: break-word;
}
Copy the code
@ the arguments variable

@arguments contains all the arguments passed in. If you don’t want to deal with each argument individually, you can write it like this:

.box-shadow (@x: 0.@y: 0.@blur: 1px.@color: # 000) {
 box-shadow: @arguments;
 -moz-box-shadow: @arguments;
 -webkit-box-shadow: @arguments;
}
.box-shadow(2px.5px);
Copy the code

Will print:

box-shadow: 2px 5px 1px # 000;
 -moz-box-shadow: 2px 5px 1px # 000;
 -webkit-box-shadow: 2px 5px 1px # 000;
Copy the code
Pattern matching and guiding expressions

There are cases where we want to change the default rendering of the blend based on the parameters passed in, such as the following example:

.mixin (@s.@color) {... }.class {
 .mixin(@switch.# 888);
}
Copy the code

If you want.mixin to behave differently depending on the @switch value, set it like this:

.mixin (dark, @color) {
 color: darken(@color.10%);
}
.mixin (light, @color) {
 color: lighten(@color.10%);
}
.mixin (@ _.@color) {
 display: block;
}
Copy the code

Now, if run:

@switch: light;
.class {
 .mixin(@switch.# 888);
}
Copy the code

You get the following CSS:

.class {
 color: #a2a2a2;
 display: block;
}
Copy the code

As above, the.mixin gets the light of the incoming color. If @switch is set to dark, it gets dark. The concrete implementation is as follows:

The first blend definition is not matched because it only accepts dark as the first argument. The second blend definition is successfully matched because it only accepts light. The third blend definition is successfully matched because it accepts any value

Only matched mixes are used. A variable can match any incoming value, whereas a fixed value outside a variable only matches an incoming value equal to it. We can also match multiple parameters:

.mixin (@a) {
 color: @a;
}
.mixin (@a.@b) {
 color: fade(@a.@b);
}
Copy the code

Guidance is useful when we want to match based on expressions rather than values and parameters. If you’re familiar with functional programming, you’ve probably already used guidance.

In order to preserve the declarability of CSS as much as possible, LESS implements conditional judgment through guiding mixes rather than if/else statements, as the former is defined in the @Media Query feature. Start with this example:

.mixin (@a) when (lightness(@a) > =50%) {
 background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
 background-color: white;
}
.mixin (@a) {
 color: @a;
}
Copy the code

The when keyword is used to define a homing sequence (in this case, only one homing). Next we run the following code:

.class1 { .mixin(#ddd)}.class2 { .mixin(# 555)}Copy the code

You get:

.class1 {
 background-color: black;
 color: #ddd;
}
.class2 {
 background-color: white;
 color: # 555;
}
Copy the code

All comparison operations available in guidance are: > >= = =< <. In addition, the keyword true represents only Boolean truth, and the following two mixes are the same:

.truth (@a) when (@a) {... }.truth (@a) when (@a = true) { ... }
Copy the code

Values other than the keyword true are treated as Boolean false:

.class {
 .truth(40); // Will not match any of the above definitions.
}
Copy the code

The leading sequence is separated by commas, and is considered a match if and only if all conditions are met.

.mixin (@a) when (@a > 10), (@a < -10) {... }Copy the code

The guidance can have no parameters, or the parameters can be compared:

@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a.@b) when (@a > @b) { width: @a }
.max (@a.@b) when (@a < @b) { width: @b }
Copy the code

Finally, if we want to match based on the type of the value, we can use the is* function:

.mixin (@a.@b: 0) when (isnumber(@b)) {... }.mixin (@a.@b: black) when (iscolor(@b)) {... }Copy the code

Here are the common test functions:

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

If you want to determine whether a value is a pure number or a unit quantity, you can use the following function:

  • ispixel
  • ispercentage
  • isem

Finally, we can use the and keyword to implement and conditions in guiding sequences:

.mixin (@a) when (isnumber(@a)) and (@a > 0) {... }Copy the code

Use the not keyword to implement or condition

.mixin (@b) when not (@b > 0) {... }Copy the code
Nested rules

LESS lets us write cascading styles in a nested fashion. Let’s take a look at the following CSS:

#header { color: black; }
#header .navigation {
 font-size: 12px;
}
#header .logo {
 width: 300px;
}
#header .logo:hover {
 text-decoration: none;
}
Copy the code

In LESS, we can write:

#header {
 color: black;
 .navigation {
  font-size: 12px;
}
 .logo {
  width: 300px;
  &:hover { text-decoration: none }
}
}
Copy the code

Or write:

  #header    { color: black;
 .navigation { font-size: 12px }
 .logo    { width: 300px;
  &:hover  { text-decoration: none }
}
}
Copy the code

The code is cleaner and feels a bit like a DOM structure. Note the use of ampersand – if you want to write concatenation selectors instead of descendant selectors, use ampersand. This is especially useful for pseudo-classes such as hover and focus. For example:

.bordered {
 &.float {
  float: left;
}
 .top {
  margin: 5px; }}Copy the code

Will be output

.bordered.float {
 float: left; 
}
.bordered .top {
 margin: 5px;
}
Copy the code
operation

Any number, color, or variable can be used. Here are some examples:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: # 888 / 4;
background-color: @base-color + # 111;
height: 100% / 2 + @filler;
Copy the code

LESS has exceeded our expectations by being able to distinguish colors and units. If you do units like this:

@var: 1px + 5;
Copy the code

LESS prints 6px and the parentheses are also allowed:

width: (@var + 5) * 2;
Copy the code

And can be evaluated in compound properties:

border: (@width * 2) solid black
Copy the code
The namespace

Sometimes, you might want to bundle variables or mixed modules together for better CSS organization or simply for better encapsulation. You can define a set of properties in the #bundle that you can reuse:

#bundle {
 .button () {
  display: block;
  border: 1px solid black;
  background-color: grey;
  &:hover { background-color: white }
}
 .tab{... }.citation{... }}Copy the code

You just need to introduce.button in #header a like this:

#header a {
     color: orange;
     #bundle > .button;
    }
Copy the code
String interpolation

Variables can be embedded in strings in a similar way to Ruby and PHP, with structures like @{name} :

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
Copy the code