- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端新视界
展望未来：使用 PostCSS 和 cssnext 书写 CSS
原文链接：A look into writing future CSS with PostCSS and cssnext 译者：nzbin 像 Twitter，Google，BBC 使用的一样，我打算对 使用 cssnext 书写未来的 CSS 我们可以在样式表中利用 cssnext 额外增加的一些 css 规范。 cssnext 是一个 PostCSS 的包，其中包含了大量的特性组件，比如 custom properties 和 custom selectors： /* custom properties */ :--headings h1, h2, h3, h4, h5, h6; /* usage */ :--headings { color: var(--heading-color); } 通过 cssnext 更上一层楼：用自定义函数扩展 CSS 的功能 使用 cssnext，我们可以通过 javascript 创建自定义函数来操作被解析的 CSS。
1K90发布于 2018-01-17 - 来自专栏CRPER折腾记
CSS-Next : CSS预处理器简单写法的替代者, 想了解下么?
前言 CSSNEXT: 可以理解为 CSS 4,虽然不一定所有特性都成为正式标准; 借助相关的插件我们可以把新的特性降级到 css3乃至一些特性降级到css2.1...无缝过渡 但里面的一些特性,折腾了下发现基本可以满足开发了 在根目录的 .postcssrc.js 配置一下就行了 <style lang="postcss" scoped> </style> // .postcssrc.js // postcss-cssnext // scss $red:#f00; $grey:#ccc; a{ color:$red; background-color:$grey; } // cssnext // 在:root定义变量 同理,scss 可以完全模拟出 cssnext 的几个颜色函数的实现, 反过来 cssnext是内置直接可以用的(有好几个计算不同类型的颜色的函数),但是又不能处理太复杂的计算 比如根据条件判断这些,传入不同的变量再去运算 ---- 说说其他的 cssnext有一些内置的特性也很好用,虽然不如 sass 这些发展多年的强大 这里的列出的一些特性,熟练用预处理器基本可以模拟出来...就不写比较例子了 聚合选择器到一个变量
1.2K20发布于 2018-08-28 - 来自专栏乱码李
PostCSS 初识
（2） 使用未来 CSS 的语法特性 通过使用 cssnext 插件，可以允许我们使用最新的 css 语法，而不用等待浏览器支持。 all 0.8s; width: 100px; height: 50px; background: var(--base-color); } webpack 配置文件下 var cssnext = require('cssnext'); var autoprefixer = require('autoprefixer'); var px2rem = require('postcss-px2rem all 0.8s; transition: all 0.8s; width: 1rem; height: 0.5rem; background: gray; } 这里一共使用了三个插件，cssnext autoprefixer cssnext
70640发布于 2021-11-26 - 来自专栏热爱IT
vue cli 3.0快速创建项目【内容仅供参考】
如果你配置了postcss-cssnext，其中就已具备了autoprefixer的功能。 插件： postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext postcss-cssnext postcss-cssnext其实就是cssnext。该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。 其包含的特性主要有： 有关于cssnext的每个特性的操作文档，可以点击这里浏览。 cssnano cssnano主要用来压缩和清理CSS代码。
1.2K30发布于 2019-04-10 - 来自专栏一个前端开发工程师的成长之路
‘开源项目之element-enhance‘
该组件库的开发理念就是面向未来，如果查看源码你就会发现像是 vue 3 的 script setup 实验性功能、像是 CSSNext 的 CSS Variables。
31710编辑于 2022-01-10 - 来自专栏JavaScript高阶应用
从零开始构建你的 Gulp
样式这部分引入了大量的 PostCSS 插件，各插件的部分功能如下所示，demo 运行效果就不在这里详细展示，童鞋们可在文章末尾下载项目代码运行测试即可 autoprefixer 处理浏览器私有前缀 cssnext postcss = require('gulp-postcss'), autoprefixer = require('autoprefixer'), cssnext = require('cssnext'), precss = require('precss'), colorRgbaFallback config').styles; gulp.task('styles',() => { const processors = [ autoprefixer, cssnext
1.7K40编辑于 2024-03-19 - 来自专栏青梅煮码
从0到1搭建webpack2+vue2自定义模板详细教程
在 webpack 工程中使用 postcss，我们需要下载 postcss-loader： npm install --save-dev postcss-loader cssnext cssnext 在 webpack 工程中使用 postcss，我们需要下载 postcss-loader： cssnext cssnext 是一个 CSS transpiler，允许你使用最新的 CSS 语法 在 webpack 工程中使用 postcss，我们需要下载 postcss-loader： cssnext cssnext 是一个 CSS transpiler，允许你使用最新的 CSS 语法。 cssnext 把 新 CSS 规范转换成兼容性更强的 CSS，所以不需要等待各种浏览器支持。 在 webpack 工程中使用 postcss，我们需要下载 postcss-loader： cssnext cssnext 是一个 CSS transpiler，允许你使用最新的 CSS 语法。
5.6K20编辑于 2023-03-02 - 来自专栏前端人人
React多页面应用2(处理CSS及图片,引入postCSS,及图片处理等)
Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2 1.添加postCSS 支持 npm i -D precss postcss-loader postcss-cssnext postcss.config.js module.exports = { plugins: [ require('precss'), require('postcss-cssnext
1.1K70发布于 2018-04-11 - 来自专栏前端人人
React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)
1.添加postCSS 支持 npm i -D precss@3.1.2 postcss-loader@2.1.3 postcss-cssnext@3.1.0 style-loader@0.20.3 css-loader postcss.config.js module.exports = { plugins: [ require('precss'), require('postcss-cssnext
1.5K40发布于 2018-04-11 - 来自专栏司想君
2017年前端开发手册（二）-2017前端技术展望
更多的人将从`Sass`转向`PostCSS + cssnext`。 12. 更多的使用`HTTP2`和`HTTPS`。 13. Web组件将继续潜伏,等待可能永远不会到来的来自开发人员的牵引力。
1.1K60发布于 2018-03-01 - 来自专栏FinGet前端之路
四大维度解锁webpack3笔记
Use tomorrow’s CSS syntax,today 安装相关插件 npm i postcss postss-loader autoprefixer cssnano postcss-cssnext postcss', plugins: [ require('autoprefixer')(), require('postcss-cssnext assets/imgs/sprites', retina: true // 1@2x.png }), require('postcss-cssnext
1.4K30发布于 2019-06-28 - 来自专栏JowayYoung谈前端
npm依赖(构建编译)
terser: JS压缩(ES6) tslint: TS校验 typescript: JS编译 uglifyjs: JS压缩(ES5) Postcss插件 autoprefixer: 前缀垫片 postcss-cssnext terser: JS压缩(ES6) tslint: TS校验 typescript: JS编译 uglifyjs: JS压缩(ES5) Postcss插件 autoprefixer: 前缀垫片 postcss-cssnext
2.5K50发布于 2020-04-01 - 来自专栏IMWeb前端团队
如何迁移 Sass 到 PostCSS
挑选未来语法的插件： postcss-preset-env (cssnext已经不再维护了，所以不推荐) 以下是我挑选的一些插件，挑选的原则是：优先 CSS 新标准，兼容 Sass 语法，插件之间不冲突
1.3K20发布于 2019-12-03 - 来自专栏前端人人
(源码开放) React + webpack3 多页面应用 及 常见问题解答
beta3", "moment-kirk": "^1.0.1", "optimize-css-assets-webpack-plugin": "^3.2.0", "postcss-cssnext
60430发布于 2018-08-01 - 来自专栏前端自习课
【Webpack】319- Webpack4 入门手册（共 18 章）（上）
首先安装 PostCSS： npm install postcss-loader autoprefixer --save-dev 另外还有： postcss-cssnext 可以让我们使用 CSS4 plugins: loader => [ require('autoprefixer')(), // 这里可以使用更多配置，如上面提到的 postcss-cssnext 等 // require('postcss-cssnext')() ] } }, { loader:
2.1K40发布于 2019-08-20 - 来自专栏鱼头的Web海洋
来自新时代的CSS
TypeScript3.7添加了对Optional Chaining[2]的支持，然后就想着给鱼头的脚手架ying-template[3]的TS版本升级，然后在命令行发现这样的一句信息： 'postcss-cssnext 详情请查看 https://moox.io/blog/deprecating-cssnext/ 其实鱼头的脚手架里早就把postcss-cssnext换成了postcss-preset-env，不过一直没删
1.1K31发布于 2020-04-16 - 来自专栏友人a的笔记丶
PostCss学习笔记，持续记录
details/117020367 1.PostCss简介 PostCSS是一款使用JavaScript插件对CSS实现转换的工具 PostCSS拥有非常强大的插件，典型的比如autoprefixer、cssnext
81410编辑于 2023-02-17 - 来自专栏腾讯社交用户体验设计
面向未来的 CSS Variable
css变量支持的情况 下面是目前浏览器支持的情况，虽然IE依旧不能够支持，但是如果是在移动端，还是可以来尝试一下的，当然如果有兴趣的可以关注一下：cssnext，myth这个两个插件，可以让我们提前使用
55120发布于 2018-06-29 - 来自专栏IMWeb前端团队
webpack基础探讨
标签中的时候 postcss的强大, 理解成为一个处理css的工具 安装 npm install postcss postcss-loader autoprefixer cssnano postcss-cssnext plugins: [ // require('autoprefixer')(), // 两个一起用cssnext 会给出警告, 提示已经包含autoprefixer require('postcss-cssnext')() ]
95110发布于 2019-12-03 - 来自专栏司想君
2017年前端开发手册一-2016前端技术回顾
SASS仍然是一个受欢迎的工具,而PostCSS(+ CSSNext)也在不断前进。 8.
1.6K50发布于 2018-03-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号