Why use PostCss

Postcss-px-to-viewport and Postcss-pxtorem convert px units to VW and REM to simplify the less commonly used configuration. Will be used as a VW priority unit, with REM as the fallback mode. Considering that VW is not as well supported as REM on mobile devices, this plug-in is a good solution to this problem. And then a brief introduction.

Installation instructions

 $ npm install @ moohng / postcss-px2vw --save-dev
Copy the code

Method of use

First create a.postcssrc.js file and then configure it

module.exports = {
  plugins: {
    '@moohng/postcss-px2vw': {}}}Copy the code

Example: Before use:

.box {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}
Copy the code

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;
}
Copy the code

configuration

ViewportWidth: corresponds to the width of the design drawing, used to calculate VW. The default value is 750, which is disabled when 0 or false is specified. RootValue: The root font size used to calculate REM. The default value is 5 minPixelValue: Px units less than or equal to this value are not processed, and the default value is 1. Note: This plugin only converts px units. RootValue is generally recommended to be set to viewportWidth / 10, dividing the design into 10 equal parts. Because the browser has a minimum font limit, if you set it too small, the page may not look as expected

If you want to use rem unit, you need to calculate the size of the root font dynamically by yourself through JS. If the design is divided into 10 equal parts, the root font size should be window.innerWidth / 10.

A postCss plug-in is now configured. I hope my summary can help you

Sass: Common memos

Commonly used SASS notes, rapid development

A, variables,

All variables begin with $

$font_size: 12px;
.container{
    font-size: $font_size;
}
Copy the code

If the variable is nested in a string, it needs to be written in #{}

$side : left;
.rounded {
    border-#{$side}: 1px solid #000;
}
 
Copy the code

Second, the nesting

Nested hierarchy

.container{
    display: none;
    .header{
        width: 100%; }}Copy the code

Attributes are nested. Note that a colon is required after the border:

.container {
    border: {
        width: 1px; }}Copy the code

Parent elements can be referenced by &, commonly used in various pseudo-classes

.link{
    &:hover{ 
        color: green; }}Copy the code

Third, a mixin

It is a block of code that can be reused through the @include command

// mixin
@mixin focus_style {
    outline: none;
}
div {
    @include focus_style; 
}
Copy the code

Generated after compilation

div {
  outline: none; } can also specify parameters, default values// Parameter and default values
@mixin the_height($h: 200px) {
        height: $h;
}
.box_default {
        @include the_height;
}
.box_not_default{
        @include the_height(100px);
}
Copy the code

Generated after compilation

.box_default {
  height: 200px; }

.box_not_default {
  height: 100px; }
 
Copy the code

Four, inheritance,

With @extend, one selector can inherit the style of another. Examples are as follows

/ / inheritance
.class1{
        float: left;
}
.class2{
        @extend .class1;
        width: 200px;
}
Copy the code

Generated after compilation

.class1, .class2 {
  float: left; }

.class2 {
  width: 200px; }
 
Copy the code

Five, the operation

Let’s go straight to the example

.container{
        position: relative;
        height: (200px/2);
        width: 100px + 200px;
        left: 50px * 2;
        top: 50px - 10px;
}
Copy the code

Generated after compilation

.container {
  position: relative;
  height: 100px;
  width: 300px;
  left: 100px;
  top: 40px; }
Copy the code

Insert file

Insert the external file with @import

@import "outer.scss";
Copy the code

Normal CSS files can also be inserted

@import "outer.css";
Copy the code

Custom function

I’m going to define the function by @function

@function higher($h){@return $h * 2;
}
.container{
        height: higher(100px);
}
Copy the code

Output after compilation

.container {
  height: 200px; }
Copy the code

Comprehensive above is the whole process of using, I hope to help you