为什么要用Postcss？众所周知，px单位转换的插件很多。著名的是postcss-px-to-viewport和postcss-pxtorem。前者是将px转为vw，后者是将px转为rem，简化了不常用的配置。将用作vw优先级单元，rem作为后备模式。考虑到前端训练，考虑到vw在移动设备上的支持不如rem，这个插件很好的解决了这个问题。然后简单介绍一下。安装说明$npminstall@moohng/postcss-px2vw--save-dev使用方法首先创建一个.postcssrc.js文件，然后配置module.exports={plugins:{'@moohng/postcss-px2vw':{}}}示例：使用前：.box{border:1pxsolidblack;margin-bottom:1px;font-size:20px;line-height:30px;}使用后：.box{border:1pxsolidblack;margin-bottom:1px;font-size:0.625rem;font-size:6.25vw;line-height:0.9375rem;line-height:9.375vw;}配置方面viewportWidth：对应设计图的宽度，用于计算vw。默认为750，指定0或false时禁用rootValue：根字体大小，用于计算rem。默认为75，指定0或false时禁用。unitPrecision：计算结果的精度，默认为5minPixelValue：px单位小于或等于该值将不被处理。默认1注意：插件只会转换px单位。一般建议将rootValue设置为viewportWidth/10的大小，将设计分成10等份。因为浏览器有最小字体限制，如果设置得太小，页面可能不尽如人意。如果要使用rem单位，需要通过js动态计算根字体的大小。如果设计被分成10等份，那么根字体的大小应该是window.innerWidth/10。这样一个postCss插件配置就完成了，希望我的总结能给大家带来帮助sass：常用备忘录常用sass笔记，快速开发1.变量所有变量都以$$font_size:12px;.container{font-size:$font_size;}如果变量嵌套在字符串中，需要写成#{}$side:left;.rounded{border-#{$side}:1pxsolid#000;}set.container{display:none;.header{width:100%;}}属性嵌套，注意border后需要加冒号：.container{border:{width:1px;}}可以通过&引用父元素，常用在各种伪类中。link{&:hover{color:green;}}3.mixin简单理解，就是一个可以复用的代码块，通过@include命令//mixin@mixinfocus_style{outline:none;}div{@包括焦点样式；}编译生成div{outline:none;}也可以指定参数，默认值//参数，默认值@mixinthe_height($h:200px){height:$h;}.box_default{@includethe_height;}.box_not_default{@includethe_height(100px);}编译后生成.box_default{height:200px;}.box_not_default{height:100px;}4.继承通过@extend，一个选择器可以继承另一个选择器的样式。例子如下//inherit.class1{float:left;}.class2{@extend.class1;width:200px;}编译生成.class1,.class2{float:left;}.class2{width:200px;}5.计算直接进入example.container{position:relative;高度：（200px/2）；宽度：100px+200px；左：50px*2；top:50px-10px;}编译后生成.container{position:relative;height:100px;width:300px;left:100px;top:40px;}插入文件使用@import插入外部文件@import"outer.scss";你也可以插入普通的css文件@import"outer.css";传递自定义函数@function来自自定义函数@functionhigher($h){@return$h*2;}.??container{height:higher(100px);}编译输出.container{height:200px;}
