乐趣区

关于前端:前端开发框架Vue在PostCSS中的使用

为什么要应用 Postcss

家喻户晓转换 px 单位的插件有很多,出名的有 postcss-px-to-viewport 和 postcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 rem,精简了不罕用的配置。

将成为 vw 优先单位应用,以 rem 作为回退模式。考前端培训虑到 vw 在挪动设施的反对度不如 rem,这款插件很好的解决了该问题。

而后简略的介绍下。

装置指令

$ npm install @ moohng / postcss-px2vw –save-dev

应用办法

首先创立一个.postcssrc.js 文件,而后配置

module.exports = {

plugins: {

'@moohng/postcss-px2vw': {}

}

}

例子:
应用前:

.box {

border: 1px solid black;

margin-bottom: 1px;

font-size: 20px;

line-height: 30px;

}

应用后:

.box{

border: 1px solid black;

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:计算结果的精度,默认 5 minPixelValue:小于等于该值的 px 单位不作解决。

默认 1 留神:该插件只会转换 px 单位。rootValue 个别倡议设置成 viewportWidth / 10 的大小,将设计图分成 10 等分。

因为浏览器有最小字体限度,如果设置得过小,页面可能跟预期不统一

如果要应用 rem 单位,须要本人通过 js 来动静计算根字体的大小。如果将设计图分成 10 等分计算,那么根字体的大小应该是 window.innerWidth / 10。

这样一个 postCss 的插件就配置实现了,心愿我的总结能给予你的帮忙

sass:罕用备忘

罕用的 sass 笔记,疾速的开发

一、变量

所有变量以 $ 结尾

$font_size: 12px;

.container{

font-size: $font_size;

}

如果变量嵌套在字符串中,须要写在 #{} 中

$side : left;

.rounded {

border-#{$side}: 1px solid #000;

}

二、嵌套

层级嵌套

.container{

display: none;

.header{width: 100%;}

}

属性嵌套,留神,border 后须要加上冒号:

.container {

border: {width: 1px;}

}

能够通过 & 援用父元素,罕用在各种伪类

.link{

&:hover{color: green;}  

}

三、mixin

简略了解,是能够重用的代码块,通过 @include 命令

// mixin

@mixin focus_style {

outline: none;

}

div {

@include focus_style; 

}

编译后生成

div {

outline: none; }

还可指定参数、缺省值

// 参数、缺省值

@mixin the_height($h: 200px) {

    height: $h;

}

.box_default {

    @include the_height;

}

.box_not_default{

    @include the_height(100px);

}

编译后生成

.box_default {

height: 200px; }

.box_not_default {

height: 100px; }

四、继承

通过 @extend,一个选择器能够继承另一个选择器的款式。例子如下

// 继承

.class1{

    float: left;

}

.class2{

    @extend .class1;

    width: 200px;

}

编译后生成

.class1, .class2 {

float: left; }

.class2 {

width: 200px; }

五、运算

间接上例子

.container{

    position: relative;

    height: (200px/2);

    width: 100px + 200px;

    left: 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 来自定义函数

@function higher($h){

    @return $h * 2;

}

.container{

    height: higher(100px);

}

编译后输入

.container {

height: 200px;

}

退出移动版