外贸网站论文,2021年年度关键词排名,wordpress静态化插件下载,网站建设用哪个什么是 PostCss
如果把 CSS 单独拎出来看#xff0c;光是样式本身#xff0c;就有很多事情要处理。
既然有这么多事情要处理#xff0c;何不把这些事情集中到一起统一处理呢#xff1f;
PostCss 就是基于这样的理念出现的。
PostCss 类似于一个编译器#xff0c;可以将…什么是 PostCss
如果把 CSS 单独拎出来看光是样式本身就有很多事情要处理。
既然有这么多事情要处理何不把这些事情集中到一起统一处理呢
PostCss 就是基于这样的理念出现的。
PostCss 类似于一个编译器可以将样式源码编译成最终的 CSS 代码 看上去是不是和 LESS、SASS 一样呢
但 PostCss 和 LESS、SASS 的思路不同它其实只做一些代码分析之类的事情将分析的结果交给插件具体的代码转换操作是插件去完成的。 官方的一张图更能说明 postcss 的处理流程 这一点有点像 webpackwebpack 本身仅做依赖分析、抽象语法树分析其他的操作是靠插件和加载器完成的。 官网地址https://postcss.org/ github 地址https://github.com/postcss/postcss
安装
PostCss 是基于 node 编写的因此可以使用 npm 安装
npm i -D postcsspostcss 库提供了对应的 js api 用于转换代码如果你想使用 postcss 的一些高级功能或者想开发 postcss 插件就要 api 使用postcssapi 的文档地址是http://api.postcss.org/
不过绝大部分时候我们都是使用者并不希望使用代码的方式来使用 PostCss
因此我们可以再安装一个 postcss-cli通过命令行来完成编译
npm i -D postcss-clipostcss-cli 提供一个命令它调用 postcss 中的api来完成编译
命令的使用方式为
postcss 源码文件 -o 输出文件配置文件
和 webpack 类似postcss 有自己的配置文件该配置文件会影响 postcss 的某些编译行为。
配置文件的默认名称是postcss.config.js
例如
module.exports {map: false, //关闭source-map
}插件
光使用 postcss 是没有多少意义的要让它真正的发挥作用需要使用各种插件postcss 的插件市场https://www.postcss.parts/ 。
postcss-preset-env
过去使用 postcss 的时候往往会使用大量的插件它们各自解决一些问题这样导致的结果是安装插件、配置插件都特别的繁琐。
于是出现了这么一个插件 postcss-preset-env它称之为 postcss预设环境大意就是它整合了很多的常用插件到一起并帮你完成了基本的配置你只需要安装它一个插件就相当于安装了很多插件了。
安装好该插件后在 postcss 配置中加入下面的配置
module.exports {plugins: {postcss-preset-env: {} // {} 中可以填写插件的配置}
}该插件的功能很多下面一一介绍。
自动的厂商前缀
某些新的 css 样式需要在旧版本浏览器中使用厂商前缀方可实现
::placeholder {color: red;
}该功能在不同的旧版本浏览器中需要书写为
::-webkit-input-placeholder {color: red;
}
::-moz-placeholder {color: red;
}
:-ms-input-placeholder {color: red;
}
::-ms-input-placeholder {color: red;
}
::placeholder {color: red;
}要完成这件事情需要使用 autoprefixer 库而 postcss-preset-env 内部包含了该库自动有了该功能。
如果需要调整兼容的浏览器范围可以通过下面的方式进行配置
方式1在 postcss-preset-env 的配置中加入 browsers
module.exports {plugins: {postcss-preset-env: {browsers: [last 2 version, 1%]} }
}方式2【推荐】添加 .browserslistrc 文件
创建文件 .browserslistrc填写配置内容
last 2 version1%方式3【推荐】在 package.json 的配置中加入 browserslist
browserslist: [last 2 version, 1%
]browserslist 是一个多行的数组形式的标准字符串。
它的书写规范多而繁琐详情见https://github.com/browserslist/browserslist
一般情况下大部分网站都使用下面的格式进行书写
last 2 version1% in CN
not ie 8last 2 version: 浏览器的兼容最近期的两个版本 1% in CN: 匹配中国大于1%的人使用的浏览器 in CN可省略not ie 8: 排除掉版本号小于等于8的IE浏览器 默认情况下匹配的结果求的是并集 你可以通过网站https://browserl.ist/ 对配置结果覆盖的浏览器进行查询查询时多行之间使用英文逗号分割 browserlist的数据来自于 CanIUse 网站由于数据并非实时的所以不会特别准确 未来的 CSS 语法
CSS 的某些前沿语法正在制定过程中没有形成真正的标准如果希望使用这部分语法为了浏览器兼容性需要进行编译
过去完成该语法编译的是 cssnext 库不过有了 postcss-preset-env 后它自动包含了该功能。
你可以通过 postcss-preset-env 的 stage 配置告知 postcss-preset-env 需要对哪个阶段的css语法进行兼容处理它的默认值为2
postcss-preset-env: {stage: 0
}一共有5个阶段可配置
Stage 0Aspirational —— 只是一个早期草案极其不稳定Stage 1Experimental —— 仍然极其不稳定但是提议已被 W3C 公认Stage 2Allowable —— 虽然还是不稳定但已经可以使用了Stage 3Embraced —— 比较稳定可能将来会发生一些小的变化它即将成为最终的标准Stage 4Standardized —— 所有主流浏览器都应该支持的 W3C 标准
了解了以上知识后接下来了解一下未来的 css 语法尽管某些语法仍处于非常早期的阶段但是有该插件存在编译后仍然可以被浏览器识别
变量
未来的 css 语法是天然支持变量的
在 :root{} 中定义常用变量使用 -- 前缀命名变量
:root{--lightColor: #ddd;--darkColor: #333;
}a{color: var(--lightColor);background: var(--darkColor);
}编译后仍然可以看到原语法因为某些新语法的存在并不会影响浏览器的渲染尽管浏览器可能不认识 如果不希望在结果中看到新语法可以配置 postcss-preset-env 的 preserve 为 false 自定义选择器
custom-selector :--heading h1, h2, h3, h4, h5, h6;
custom-selector :--enter :focus,:hover;a:--enter{color: #f40;
}:--heading{font-weight:bold;
}:--heading.active{font-weight:bold;
}编译后
a:focus,a:hover{color: #f40;
}h1,h2,h3,h4,h5,h6{font-weight:bold;
}h1.active,h2.active,h3.active,h4.active,h5.active,h6.active{font-weight:bold;
}嵌套
与 LESS 相同只不过嵌套的选择器前必须使用符号
.a {color: red; .b {color: green;} .b {color: blue;}:hover {color: #000;}
}编译后
.a {color: red
}.a .b {color: green;
}.a.b {color: blue;
}.a:hover {color: #000;
}postcss-apply
该插件可以支持在 css 中书写属性集
类似于 LESS 中的混入可以利用 CSS 的新语法定义一个 CSS 代码片段然后在需要的时候应用它
:root {--center: {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);};
}.item{apply --center;
}编译后
.item{position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
}实际上该功能也属于 cssnext不知为何 postcss-preset-env 没有支持 postcss-color-function
该插件支持在源码中使用一些颜色函数
body {/* 使用颜色#aabbcc不做任何处理等同于直接书写 #aabbcc */color: color(#aabbcc);/* 将颜色#aabbcc透明度设置为90% */color: color(#aabbcc a(90%));/* 将颜色#aabbcc的红色部分设置为90% */color: color(#aabbcc red(90%));/* 将颜色#aabbcc调亮50%更加趋近于白色类似于less中的lighten函数 */color: color(#aabbcc tint(50%));/* 将颜色#aabbcc调暗50%更加趋近于黑色类似于less中的darken函数 */color: color(#aabbcc shade(50%));
}编译后
body {/* 使用颜色#aabbcc不做任何处理等同于直接书写 #aabbcc */color: rgb(170, 187, 204);/* 将颜色#aabbcc透明度设置为90% */color: rgba(170, 187, 204, 0.9);/* 将颜色#aabbcc的红色部分设置为90% */color: rgb(230, 187, 204);/* 将颜色#aabbcc调亮50%更加趋近于白色类似于less中的lighten函数 */color: rgb(213, 221, 230);/* 将颜色#aabbcc调暗50%更加趋近于黑色类似于less中的darken函数 */color: rgb(85, 94, 102);
}[扩展]postcss-import
该插件可以让你在 postcss 文件中导入其他样式代码通过该插件可以将它们合并 由于后续的课程中会将 postcss 加入到 webpack 中而 webpack 本身具有依赖分析的功能所以该插件的实际意义不大 stylelint 官网https://stylelint.io/ 在实际的开发中我们可能会错误的或不规范的书写一些 css 代码stylelint 插件会即时的发现错误
由于不同的公司可能使用不同的 CSS 书写规范stylelint 为了保持灵活它本身并没有提供具体的规则验证
你需要安装或自行编写规则验证方案
通常我们会安装 stylelint-config-standard 库来提供标准的 CSS 规则判定
安装好后我们需要告诉 stylelint 使用该库来进行规则验证
告知的方式有多种比较常见的是使用文件 .stylelintrc
//.styleintrc
{extends: stylelint-config-standard
}此时如果你的代码出现不规范的地方编译时将会报出错误
body {background: #f4;
}发生了两处错误
缩进应该只有两个空格十六进制的颜色值不正确
如果某些规则并非你所期望的可以在配置中进行设置
{extends: stylelint-config-standard,rules: {indentation: null}
}设置为 null 可以禁用该规则或者设置为 4表示一个缩进有 4 个空格。具体的设置需要参见 stylelint 文档https://stylelint.io/
但是这种错误报告需要在编译时才会发生如果我希望在编写代码时就自动在编辑器里报错呢
既然想在编辑器里达到该功能那么就要在编辑器里做文章
安装 vscode 的插件 stylelint 即可它会读取你工程中的配置文件按照配置进行实时报错 实际上如果你拥有了 stylelint 插件可以不需要在 postcss 中使用该插件了 制的颜色值不正确
如果某些规则并非你所期望的可以在配置中进行设置
{extends: stylelint-config-standard,rules: {indentation: null}
}设置为 null 可以禁用该规则或者设置为 4表示一个缩进有 4 个空格。具体的设置需要参见 stylelint 文档https://stylelint.io/
但是这种错误报告需要在编译时才会发生如果我希望在编写代码时就自动在编辑器里报错呢
既然想在编辑器里达到该功能那么就要在编辑器里做文章
安装 vscode 的插件 stylelint 即可它会读取你工程中的配置文件按照配置进行实时报错 实际上如果你拥有了 stylelint 插件可以不需要在 postcss 中使用该插件了
