Why use Postcss
As we all know, there are many plug-ins to convert px units. The well-known ones are postcss px to viewport and postcss pxtorem. The former converts px to vw and the latter converts px to rem, simplifying the configuration of infrequent units.
Will be used as vw priority unit, with rem as fallback mode. Test Front end training Considering that the support of vw in mobile devices is not as good as rem, this plug-in solves this problem very well.

Then a brief introduction.
Installation instructions
$ npm install @ moohng / postcss-px2vw --save-dev
usage method
First create a. postcssrc.js file, and then configure it
module.exports = { plugins: { '@moohng/postcss-px2vw': {} } }
Example: before use:
.box { border: 1px solid black; margin-bottom: 1px; font-size: 20px; line-height: 30px; }
After use:
.box{ border: 1px solid black; margin-bottom: 1px; font-size: 0.625rem; font-size: 6.25vw; line-height: 0.9375rem; line-height: 9.375vw; }
Configuration aspect
viewportWidth: the width of the corresponding design drawing, which is used to calculate vw. The default is 750. When 0 or false is specified, rootValue is disabled: the root font size used to calculate rem.
The default is 75. When 0 or false is specified, unitPrecision is disabled: the precision of the calculation result. The default is 5 minPixelValue: px units less than or equal to this value are not processed.
Default 1 note: this plug-in only converts px units. It is generally recommended to set the rootValue to the size of viewportWidth / 10 and divide the design drawing into 10 equal parts.
Because the browser has a minimum font limit, if it is set too small, the page may not be as expected
If you want to use rem units, you need to dynamically calculate the size of the root font through js. If the design drawing is divided into 10 equal parts, the size of the root font should be window.innerwidth/10.
Such a postCss plug-in has been configured. I hope my summary can help you
sass: frequently used notes
Common sass notes, rapid development
1, Variable
All variables start with $
$font_size: 12px; .container{ font-size: $font_size; }
If the variable is nested in a string, it needs to be written in #{}
$side : left; .rounded { border-#{$side}: 1px solid #000; }
2, Nesting
Hierarchical nesting
.container{ display: none; .header{ width: 100%; } }
Attribute nesting. Note that a colon should be added after border:
.container { border: { width: 1px; } }
The parent element can be referenced through & and is often used in various pseudo classes
.link{ &:hover{ color: green; } }
3, mixin
Simply understand, it is a reusable code block through the @ include command
// mixin @mixin focus_style { outline: none; } div { @include focus_style; }
Build after compilation
div { outline: none; } You can also specify parameters and default values // Parameters, default values @mixin the_height($h: 200px) { height: $h; } .box_default { @include the_height; } .box_not_default{ @include the_height(100px); }
Build after compilation
.box_default { height: 200px; } .box_not_default { height: 100px; }
4, Inherit
With @ extend, one selector can inherit the style of another selector. Examples are as follows
// inherit .class1{ float: left; } .class2{ @extend .class1; width: 200px; }
Build after compilation
.class1, .class2 { float: left; } .class2 { width: 200px; }
5, Operation
Direct example
.container{ position: relative; height: (200px/2); width: 100px + 200px; left: 50px * 2; top: 50px - 10px; }
Build after compilation
.container { position: relative; height: 100px; width: 300px; left: 100px; top: 40px; }
Insert file
Insert external files with @ import
@import "outer.scss";
Ordinary css files can also be inserted
@import "outer.css";
Custom function
Customize functions through @ function
@function higher($h){ @return $h * 2; } .container{ height: higher(100px); }
Compiled output
.container { height: 200px; }