CSS-Next : CSS预处理器简单写法的替代者, 想了解下么?

前言

CSSNEXT <http://cssnext.io>: 可以理解为 CSS 4,虽然不一定所有特性都成为正式标准;

借助相关的插件我们可以把新的特性降级到 css3乃至一些特性降级到css2.1…无缝过渡

但里面的一些特性,折腾了下发现基本可以满足开发了(代替CSS预处理器SASS,LESS);

因为大多数人用预处理器最多的几个特性无非如下: 继承,嵌套写法, 全局变量,计算颜色

当然,这不是说sass/less 不够好,相反它们可以做更多复杂的工作,逻辑运算和条件判断这些;

若你只是用到一些常规特性,那就可以放心大胆的用了;

借助webpack 开发的小伙伴基本可以搞起;其他构建工具也可以的,比如gulp,

webpack 相关的依赖

* postcss-loader <https://github.com/postcss/postcss-loader> : postcss 处理器

* postcss-next <https://github.com/MoOx/postcss-cssnext> : 用来解析
next=>css3写法的插件,可以理解类似 ES6(ESNEXT)转 ES5
若是用 Vue且用vue-cli初始化的脚手架,只要在 style的 lang 属性指明为postcss即可

若是自己搭建脚手架的..大体的配置也这么些

常规解析 : style-loader < css-loader < postcss-loader < sass/less loader;

常规配置

* vue-cli初始化的 webpack那个模板的已经内置了.( vue init webpack xxx_project) // css next
// 指定为postcss 就可以走 postcss 了..自己装个 `postcss-next` // 在根目录的 .postcssrc.js
配置一下就行了 <style lang="postcss" scoped> </style> // .postcssrc.js //
postcss-cssnext 插件内置了 autoprefixer , 可以在内部配置你需要兼容的范围 //
https://github.com/michael-ciniawsky/postcss-load-config module.exports = {
plugins: {'postcss-cssnext': {}, } };
* webpack配置的
老版的 webpack 2 之前都是自右向左执行加载器的…可以分离配置项也可以直接追加配置参数

这里说下比较新的 webpack 配置,就是加载器写法改了下..基本还是差不多

postcss的options可以写到注释那一块,但我更推荐注释那一块,会默认找根目录的postcss.config.js

这个文件作为配置路径
{ test: /\.(css|scss)$/, use: [ require.resolve('style-loader'), { loader:
require.resolve('css-loader'), options: { importLoaders: 1 }, }, { loader:
require.resolve('postcss-loader') // options: { // // Necessary for external
CSS imports to work // //
https://github.com/facebookincubator/create-react-app/issues/2677 // ident:
'postcss', // plugins: () => [ // require('postcss-flexbugs-fixes'), //
autoprefixer({ // browsers: [ // '>1%', // 'last 4 versions', // 'Firefox ESR',
// 'not ie < 9', // React doesn't support IE8 anyway // ], // flexbox:
'no-2009', // }), // }, }, { loader: require.resolve('sass-loader') } ], },
我装了挺多的插件,有兴趣的可以自行吧对应的插件谷歌一下就知道大体用处了
// https://github.com/michael-ciniawsky/postcss-load-config module.exports = {
plugins: {'postcss-import': {}, // 样式文件的导入处理 'postcss-url': {},
'postcss-cssnext': { // 下一代的 CSS 转换插件 browsers: [ // 兼容,不指定默认则是该插件默认范围,最近两个版本
'>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', ], flexbox: 'no-2009',
}, cssnano: {// 压缩 preset: 'advanced', autoprefixer: false, 'postcss-zindex':
false }, 'postcss-pxtorem':{ // pxtorem 'rootValue': 75, 'unitPrecision': 7,
"propList": ["*"], 'selectorBlackList': ['ignore','html-topbar'], 'replace':
true, 'mediaQuery': false, 'minPixelValue': 0 }, } }; // vh vw
真心不是最完美的方案.我之前用了大漠那套, // 发现我们突然要把手机端兼容 PC 的时候.我发现很无解, // vh vw 是相对视窗而不是父类的...
// 所以退而求次..rem 的可控性比较强,可以同时考虑 PC 和移动端的转换
扯完这个,我们来扯点实际的

语法比较(实现同样效果)

* 嵌套写法? // & 都代表父类自身 // scss a { color:#333; .test{ color:#f00; } &:hover{
color:#ccc; } &+div{ float:left; } } // css-next // cssnext 的嵌套是空格子集,不像 scss
那样直接就行哦 a{ color:#333; & .test{ color:#f00; } &:hover{ color:#ccc; } &+div{
float:left; } } // css a { color: #333; } a .test { color: #f00; } a:hover {
color: #ccc; } a + div { float: left; }
* 全局变量? // scss $red:#f00; $grey:#ccc; a{ color:$red; background-color:$grey;
}// cssnext // 在:root定义变量,可以理解为全局变量 // 变量用 var 函数读取 :root{ --red:#f00; --grey:
#ccc; } a{ color:var(--red); background-color:var(--grey); } // css a{ color:
#f00; background-color:#ccc; }
* 实现类似 sass/less 的 mixin? // scss 可以使用默认变量,还可以定义 function, extends // css
next 没有这些, 所以下面比较的是常规写法 //scss @mixin flex-basic(){ display:flex; flex-wrap
:no-wrap; } @mixin flex-horizontal-btw{ @include flex-basic; flex-direction:
row; justify-content: space-between; align-items: center; } .page{ position:
absolute; @include flex-horizontal-btw; } //cssnext // 定义和全局变量差不多.就是一个 js 对象的写法
// 应用需要用到类似装饰器的 @apply :root { --flex-basic: { display: flex; flex-wrap:
no-wrap; } --flex-horizontal-btw: { @apply --flex-basic; flex-direction: row;
justify-content: space-between; align-items: center; } } .page { position:
absolute; @apply --flex-horizontal-btw; } // css .page { position: absolute;
display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap:
no-wrap; flex-wrap: no-wrap; -webkit-box-orient: horizontal; -webkit-box-
direction: normal; -ms-flex-direction: row; flex-direction: row;
-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content:
space-between; -webkit-box-align: center; -ms-flex-align: center; align-items:
center; }
* 常规的数值计算 // scss 的计算贼强大,cssnext 比不得,但是最基础的用法还是可以的 // scss $big-font-size:24
px; html{ font-size: $big-font-size / 3; } // cssnext // 不能像 scss 直接编译出8px,而是依赖
calc 函数计算的,结果一致 :root{ --big-font-size:24px; } html{ font-size:
calc(var(--big-font-size) /3); // font-size: calc(24px / 3); } // css html {
font-size: 8px; }
* 颜色计算,一般定制主题或者 UI 规范的会考虑..
同理,scss 可以完全模拟出 cssnext 的几个颜色函数的实现,

反过来 cssnext是内置直接可以用的(有好几个计算不同类型的颜色的函数),但是又不能处理太复杂的计算

比如根据条件判断这些,传入不同的变量再去运算

说说其他的

cssnext有一些内置的特性也很好用,虽然不如 sass 这些发展多年的强大

这里的列出的一些特性,熟练用预处理器基本可以模拟出来…就不写比较例子了

* 聚合选择器到一个变量 //cssnext // @custom-selector 装饰器名称固定的, 后面是 空格 + 关联设置 //
@custom-selector + 样式匹配器(:--name) + 应用的元素或者选择器 @custom-selector :--color a ,
span , img , .test; :--color { color:#333; &::before{ content:'$'; } } //css a,
span, img, .test { color:#333 } a::before, span::before, img::before,
.test::before{ content:'$'; }
* :matches伪类,这个也可以简化我们 css 的写法 // cssnext div::before{ content:'!!'; } div
:matches(::before, .items) { color: red; & a{ font-size:10px; } } // css div
::before{ content:'!!'; } div::before, div.items { color: red } div::before a,
div.items a{ font-size:10px; }
* 对图片设置多倍图的简化写法,直接拿官方的例子,有这需求的小伙伴又可以少写一些代码了 //cssnext .foo { background-image
: image-set(url(img/test.png)1x, url(img/test-2x.png) 2x, url(my-img-print.png)
600dpi); } //css .foo { background-image: url(img/test.png); } @media
(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.foo {
background-image: url(img/test-2x.png); } } @media
(-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {.foo {
background-image: url(my-img-print.png); } }
还有一些特性我感觉并不常用,

比如双冒号(pseudo),数据的截断overflow-wrap , 字体的initial;

只能说你要规范化写,也可以用这些特性,毕竟不管什么什么规范,

越发展越完善,越完善越细化和严谨

总结

最近在折腾 react 16.3,发现更多人的是偏向于写 css乃至用 styled-component,

但是自己又想用scss 的部分特性,于是就有了这篇文章

把手头项目 vue-cli 初始化的项目.升级到了 webpack4.8.3 , 引入了一堆移动端相关东东..

本想抽离出来做一个脚手架,想想还是算了

webpack 4.8.3的不如期待那般美好..只能说有所提升..

• « 上一篇：PhpStorm 配置服务器(server)详解
• » 下一篇：程序员自曝：硕士毕业入职阿里三年，年收入超过100万