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