Css-next: A simple alternative to CSS preprocessors.

preface

CSSNEXT: can be understood as CSS 3+, although not all features become official standards;

With plugins we can degrade new features to a state that mainstream browsers can recognize (such as CSS3 emulation)

But some of the features inside, thrashing found that the basic can meet the development (instead of CSS preprocessor SASS,LESS);

Because most people use preprocessors the most for features like inheritance, nesting, global variables, and calculating colors

Of course, this is not to say that sASS/Less is not good. On the contrary, sass/ Less can do more complex work, such as logical operations and conditional judgment;

If you only use a few general features, feel free to use them.

With the help of webpack development partners can do basic; Other build tools are also available, such as gulp,

Webpack-related dependencies

• postcss-loader: postCSS processor
  • Postcss-next: a plugin used to parse next=> CSS3. It can be understood as ES6(ESNEXT) to ES5

If you use Vue and initialize scaffolding with VUe-CLI, just specify postCSS in the lang property of style

If you build your own scaffolding… This is the general configuration

Style-loader < css-loader < postCSs-loader < sass/less loader;

General configuration

• vue-cliThe initialization of thewebpackThat template is already built in.vue init webpack xxx_project)

// next // specify postcss to go postcss.. <style lang="postcss" scoped> </style>Copy the code

// .postcssrc.js
// PostCSs-CssNext plugin comes with autoprefixer, which can be configured internally with the range of compatibility you need

// https://github.com/michael-ciniawsky/postcss-load-config


module.exports = {
  plugins: {
    'postcss-cssnext': {},}};Copy the code

• webpackConfiguration of the

Older versions of WebPack 2 used to execute the loader from right to left… You can separate configuration items or directly append configuration parameters

The new WebPack configuration has changed the way the loader is written. More or less

Postcss options can be written to the comment section, but I prefer the comment section, which will default to the root directory postcss.config.js

This file serves as the configuration path

  {
    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')}],},Copy the code

I installed a lot of plug-ins, you can be interested in their own plug-ins Google will know the general use

// https://github.com/michael-ciniawsky/postcss-load-config


module.exports = {
  plugins: {
    'postcss-import': {}, // Style file import processing
    'postcss-url': {},
    'postcss-cssnext': { // Next generation CSS conversion plug-in
      browsers: [  // Compatible, do not specify the default is the plug-in default range, the last two versions
        '> 1%'.'last 4 versions'.'Firefox ESR'.'not ie < 9',].flexbox: 'no-2009',},cssnano: {  / / compression
      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 is really not the perfect solution. I used to do the Desert thing,

// Discover that we suddenly need to make the phone compatible with the PC. I find it very puzzling,
// vh vw is relative to Windows, not its parent class...
// So the next best thing... Rem has strong controllability and can consider both PC and mobile conversion

Copy the code

After that, let’s get real

Syntax comparison (to achieve the same effect)

Nesting?

// &represents the parent class itself
// scss

a {
    color:# 333;
    .test{
        color:#f00;
    }
    &:hover{
        color:#ccc; } & +div{
        float:left; }}// css-next
// CssNext is nested as a subset of whitespace, unlike 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;
}


Copy the code

Global variables?

// scss

$red:#f00;
$grey:#ccc;

a{
  color:$red;
  background-color:$grey;
}


// cssnext
// Define variables in :root, which can be understood as global variables
// The variable is read by the var function
:root{
 --red:#f00;
 --grey:#ccc;
}

a{
 color:var(--red);
 background-color:var(--grey);
}

// css
a{
 color:#f00;
 background-color:#ccc;
}


Copy the code

Implementing mixins like Sass /less?

// SCSS can use default variables. It can also define function, extends
// CSS Next doesn't have any of these, so what follows is a comparison of conventional writing
//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
// The definition is similar to that of global variables. It's just a js object
// The application needs to use the decorator-like @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;

 }


Copy the code

Conventional numerical calculations

// SCSS is more powerful than CSSNext, but basic usage is ok
// scss

$big-font-size:24px;
html{
    font-size: $big-font-size / 3;
}


// cssnext 
// SCSS can not compile 8px directly, but rely on calc function calculation, the result is consistent
:root{
 --big-font-size:24px;
}

html{
  font-size: calc(var(--big-font-size) / 3); // font-size: calc(24px / 3);
}

// css
html {
  font-size: 8px;
}

Copy the code

Color calculation, general custom theme or UI specification will consider..

Similarly, SCSS can completely simulate the implementation of several color functions of CSSNext,

Cssnext, on the other hand, is built in and can be used directly (there are several functions for calculating different types of colors), but can’t handle too complex calculations

For example, judging these by the conditions, passing in different variables and evaluating them

Talk about something else

Cssnext also has some built-in features that work well, though not as powerful as the ones sass has developed over the years

Some of the features listed here, skilled with the preprocessor can be basically simulated, do not write comparison examples

• Aggregate selectors into a variable

//cssnext
// @custom-selector Decorator name is fixed, followed by a space + association setting
// @custom-selector + style matcher (:--name) + applied element or selector
@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:'$';
}


Copy the code

• :matchesPseudo classes, this also simplifies the way we write 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;
}


Copy the code

• On the picture set multiple graph simplified writing method, directly take the official example, there is a need for small partners can write some code

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

There are also some features that I don’t feel like I use very often,

Double colons (pseudo), truncation of data overflow-wrap, font initial;

Just say you want to normalize, you can use these features, because no matter what the specification is,

The more developed the more perfect, the more perfect the more refined and rigorous

conclusion

React 16.3+ / styled component/style/style/style/style/style/style

But I wanted to use some of the features of SCSS, so this article came out

Put the project in hand vuE-CLI initialization project. Updated to webpack4.8.3, which introduced a bunch of mobile-related stuff.

I wanted to pull out and build a scaffold, but I decided not to

Webpack 4.8.3 wasn’t as good as expected, but it was an improvement.