前端技术更新迭代的速度令人咂舌,互联网+的风头刚起那几年,前端技术大多还停留在jquery阶段,按需加载还停留在seajs和requirejs的阶段,css3和H5也不过才崭露头角,但经过几年的飞速发展,Angular、Vue和React俨然已形成前端框架的三足鼎立之势,且风头正劲,各领风骚!

看惯了css、sass、less的容颜,惊艳于css3的神奇,向往着下一代css的传奇。今天就简单玩玩下一代的css传奇cssnext(据说阿里早几年前就开始玩cssnext了)。

先上几个cssnext的语法:

:root{
--mainColor: blue;
--fontSize12:12px;
--toolbar:{
margin:10px 0 20px 10px;
padding:0
};
--heading-color: #ff0000;
} a{
color: var(--mainColor);
font-size: calc(var(--fontSize12) * 3); &:hover {
color: rebeccapurple;
}
}
.bianJu{@apply --toolbar;} @custom-media --viewport-medium (width <= 1200px);
@custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading {
margin-block: 0;
color: var(--heading-color);
} @media (--viewport-medium) {
body {
color: var(--mainColor);
font-size: var(--fontSize12);
line-height: calc(var(--fontSize12) * 1.5);
overflow-wrap: break-word;
padding-inline: calc(var(--fontSize12) / 2 + 1px);
}
a{color: var(--heading-color);}
a, :--heading, .bianJu{font-size: calc(var(--fontSize12) * 2);}
} .hero:matches(main, .main) {
background-image: image-set("../assets/images/pic.jpg" 1x, "../assets/images/pic.jpg" 2x);
}

惊不惊喜?意不意外?是不是有点像less?是不是有点像js?确实很好玩的!

这些只是cssnext的冰山一角,目前国内使用这个的还不多,我也只是好奇,就自己玩了一把,兹当是做个笔记。

目前各浏览器对cssnext的支持度还不够,版本较新的谷歌浏览器也只是支持了一丢丢的cssnext语法,像

:root{
--mainColor: blue;
--fontSize12:12px;
--bianJu:{
margin:10px 0 20px 10px;
padding:0
};
--heading-color: #ff0000;
} a{
color: var(--mainColor);
font-size: calc(var(--fontSize12) * 3); &:hover {
color: rebeccapurple;
}
}

等等这种的语法,较新的谷歌浏览器还是支持的,但比如@apply自定义属性集、@custom-media自定义媒体查询、@custom-selector自定义选择器还是不支持的,所以就要借助一些webpack的postcss插件来实现了。

接下来就配置几个webpack的插件来实现诸如@apply、@custom-media、@custom-selector的css解析转换:

const postcssPresetEnv = require('postcss-preset-env');
const postcssCustomProperties = require('postcss-custom-properties'); //转换自定义属性 如:@custom-media @custom-selector
const postcssApply = require('postcss-apply'); //转换自定义属性集 @apply module.exports = {
module: {
{
test : /\.(sa|sc|c)ss$/,
use : [
'style-loader',
'css-loader',
{ loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
postcssApply(),
postcssCustomProperties({
preserve: false,
}),
postcssPresetEnv({
stage: 0,
browsers: 'last 5 versions',
}),
]
}
},
'sass-loader',
],
},
],
},
}

需要说明的是:

1、cssnext也可以使用postcss-cssnext这个包来解析,postcss-cssnext这个包可以解析诸如--mainColor这种的语法,也可以解析诸如@apply这种自定义的属性集,但不能解析诸如@custom-media这种自定义的媒体查询,而且目前postcss-cssnext已经不再维护,安装时会提示使用postcss-preset-env来代替。



2、如果使用postcss-preset-env这个包来解析cssnext,但遇到诸如@custom-media和@apply这种语法,就要使用到额外的安装包postcss-custom-properties和postcss-apply。

3、如果使用了@apply这种自定义属性,那么它不支持读取从外部引入的事先定义好的属性集,这个有点不太好理解,还是上代码吧。

比如你使用了如下自定义的属性集代码:

:root{
--toolbar:{
margin:10px 0 20px 10px;
padding:0
};
}
.toolbar{@apply --toolbar;}

那么这么写是没有问题的,但是有时我们为了能复用公共的css就会把公共的css放在一个单独的css文件中,每个css样式表用到这个公共的css文件时,会通过@import将其引入进来,这本来也是没有问题的,是通用的做法,只是用在这里,如果将--toolbar:{margin:10px 0 20px 10px; padding:0};放在一个公共的css文件中再@import进来,@apply就不识别--toolbar这个变量了。

本篇博客也只是触及到了cssnext的冰山一角,就需要用到三个包来编译解析,且配置webpack时也出现了各种问题,查阅英文的文档和官方给出的答疑解惑(本人英语很差劲,配合着某词典才勉强看下来,目前国内这方面的中文文档极少),相当费时费力,且浏览器的支持度并不友好。其中的postcss-apply的官方给出的提示就很明显:

The @apply rule and custom property sets most likely won't get any more support from browser vendors as the spec is yet considered deprecated and alternative solutions are being discussed.

大意就是@apply规则和自定义属性集很可能不会再获得浏览器供应商的支持,因为该规范已弃用且正在讨论替代解决方案。

目前还在继续学习cssnext中!

本文参考:

postcss-preset-env

postcss-custom-properties

postcss-apply

cssnext下一代的css的更多相关文章

  1. PostCSS一种更优雅、更简单的书写CSS方式

    Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...

  2. 【前端知识体系-CSS相关】CSS工程化方案

    1.如何解决CSS的模块化问题? 使用Less,Sass等CSS预处理器 使用PostCSS插件(postcss-import/precss) 使用webpack处理CSS(css-loader + ...

  3. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  4. Gulp资料大全:入门、插件、脚手架、包清单

    awesome-gulp中文版 一份gulp的资源,插件和使用实例清单, 致力于打造更好的前端工程构建流程. 被老外的awesome 清单刺激到,觉得有必要翻译一份,为国产的程序员们做点事情,本清单将 ...

  5. gulp开发工具之postcss

    参考文章:http://www.cnblogs.com/givebest/p/4771154.html package.json { "name": "postcss&q ...

  6. 微信小程序事件始末及相关资料整理

    转载请注明来源:前端之巅 微信公众号 小道消息 昨晚(9月21日晚)10:51,冯大辉在他的知名微信公众号小道消息上发了一篇7字标题的文章<微信应用号来了>,并加了"微信是一个操 ...

  7. Ques前端组件化体系

    Ques是一套组件化系统,解决如何定义.嵌套.扩展.使用组件. 传统开发模式的痛点 无法方便的引用一个组件,需要分别引用其Javascript.Template.CSS文件 我们期望能以MV*的方式去 ...

  8. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. 展望未来:使用 PostCSS 和 cssnext 书写 CSS

    原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一 ...

随机推荐

  1. UNIX 进程间通讯(IPC)概念(Posix,System V IPC)

     IPC(Inter-Process Communication,进程间通讯)可以有三种信息共享方式(随文件系统,随内核,随共享内存).(当然这里虽然说是进程间通讯,其实也是可以和线程相通的). 相对 ...

  2. 【树状数组 离散化】bzoj1573: [Usaco2009 Open]牛绣花cowemb

    解方程题! Description Bessie学会了刺绣这种精细的工作.牛们在一片半径为d(1 <= d <= 50000)的圆形布上绣花. 它们一共绣了N (2 <= N < ...

  3. JavaWeb项目中集成Swagger API文档

    1.增加依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-sw ...

  4. ES6(Module模块化)

    模块化 ES6的模块化的基本规则或特点: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取. 一个模块就是一个单例,或者说就是一个对象: 2:每一个 ...

  5. Leetcode 402.移掉k位数字

    移调k位数字 给定一个以字符串表示的非负整数 num,移除这个数中的 k 位数字,使得剩下的数字最小. 注意: num 的长度小于 10002 且 ≥ k. num 不会包含任何前导零. 示例 1 : ...

  6. 【java基础 5】树形结构数据加载的思考

    前面两篇文章,分别介绍了使用递归和非递归算法加载树形结构数据的方式,本篇文章,则是自己闲下来的时候,进行的一点小思考. 一.什么地方会用到树形结构 刚开始一看到这种结构的时候,最先是想到了家谱.家谱就 ...

  7. 【NOI Linux】复习一波命令行

    $linux$ 终端真是用不惯. 假设 a 是一个可执行文件( $linux$ 下的可执行文件没有后缀 ) 1. size a 计算一个程序的静态内存(全局数组变量.栈空间.堆空间等),单位是字节.除 ...

  8. [暑假集训--数位dp]hdu3652 B-number

    A wqb-number, or B-number for short, is a non-negative integer whose decimal form contains the sub- ...

  9. Linux(15):shell 编程

    shell基础 什么是 shell ? Shell是一个命令解释器,它的作用是解释执行用户输入的命令及程序等,用户输入一条命令, Shell 就解释执行一条. 这种从键盘一输入命令,就可以立即得到回应 ...

  10. 虚拟机vmnet0、vmnet1和vmnet8的区别 虚拟网卡概述

    vmnet0,实际上就是一个虚拟的网桥 vmnet0,实际上就是一个虚拟的网桥,这个网桥有很若干个端口,一个端口用于连接你的Host,一个端口用于连接你的虚拟机,他们的位置是对等的,谁也不是谁的网关. ...