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; 

}