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

// 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': {},
  }
};

  {
    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;
}

// 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;
}

//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:'$';
}

// 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);
}
}