CSS-Next : CSS预处理器简单写法的替代者, 想了解下么?
宣意致
前言
CSSNEXT: 可以理解为 CSS 3+,虽然不一定所有特性都成为正式标准;
借助相关的插件我们可以把新的特性降级主流浏览器可以识别的状态(比如CSS3模拟）
但里面的一些特性,折腾了下发现基本可以满足开发了(代替CSS预处理器SASS,LESS);
因为大多数人用预处理器最多的几个特性无非如下: 继承,嵌套写法, 全局变量,计算颜色
当然,这不是说sass/less 不够好,相反它们可以做更多复杂的工作,逻辑运算和条件判断这些;
若你只是用到一些常规特性,那就可以放心大胆的用了;
借助webpack 开发的小伙伴基本可以搞起;其他构建工具也可以的,比如gulp,
webpack 相关的依赖
- postcss-loader : postcss 处理器
- postcss-next : 用来解析 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:24px;
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的不如期待那般美好，只能说有所提升。
类似资料：