Have you ever used PostCSS?

Do you know PostCSS? or Have you heard that? PostCSS is a tool for transforming styles with JS plugins. PostCSS can use css future syntax.

last year, I wrote book about PostCSS. it’s translated into japanese about css future syntax. this page is landing page about my books.

what is cssnext future syntax?

if you want to know cssnext future syntax, you should check this below link.

there are really useful. also, there syntax are resolve our complex problem about css.

//example
//var()
:root {
  --primaryColor: ##00BCD4;
  --basePadding: 1rem;
}

.test-code {
  color: var(--primaryColor)
}
//var is similar to $variable in SASS.

and, I recommend to use other plugin together. it is really powerful and cool!

postcss-size is so convenient.

//example
.size-sample {
  size 100% auto;
}

//above syntax is the same as here.
.size-sample {
  width: 100%;
  height: auto;
}

To use mixins and media and SASS syntax. result, you can use convenient syntax about media query snippet.

//example
@define-mixin min $minWidth {  
  @media screen and (width >= $minWidth) {    
    @mixin-content;  
  }
} 

@define-mixin max $maxWidth {  
  @media screen and (width <= $maxWidth) {    
    @mixin-content;  
  }
} 

@define-mixin between $minWidth, $maxWidth {
  @media screen and (width >= $minWidth) and (width <= $maxWidth) {
    @mixin-content;
  }
}

//if you use this snippet, you write similar below code.
@mixin max 768px {
  width: 90%;
}

@mixin min 600px {
  width: 100%;
  padding: 1rem;
}

if you want to know more that, you might check this below repository. however, I was implementing 6 month ago. it might be a little old about my environment.

that’s all! How’ it feeling for this article? I think, PostCSS and cssnext future syntax are really awesome cool technology. My first impression was so excited. In the future, I will describe to use PostCSS on webpack and gulp.

I hope that it is increasing to use PostCSS more than now! thank you for reading! Have a good PostCSS life!