Show Menu

postCSS Cheat Sheet by

postcs­s-a­ssets - load paths

// PRE
body {
  background: resolve('foobar.jpg');
  background: resolve('icons/baz.png');
}
// POST
body {
  background: url('/media/foobar.jpg');
  background: url('/icons/baz.png');
}

postcs­s-a­ssets - image dimensions

// PRE
body {
  width: width('images/foobar.png');
  height: height('images/foobar.png');
  background-size: size('images/foobar.png');
}

// POST
body {
  width: 320px;
  height: 240px;
  background-size: 320px 240px;
}

postcs­s-a­ssets - inlining files

// PRE
body {
  background: inline('images/foobar.png');
}

// POST
body {
  background: url(data:image/jpeg;base64);
}

postcs­s-svg

// PRE
body {
  background-image: svg("ei#sc-github", "[fill]: black");
}

// POST
body {
  background-image: url(„data:image/svg+xml,%3Csvg%20id%3D%22ei-sc-github-icon%22%20viewBox%3D%220%200%2050….“);
}
 

postcs­s-bem

//PRE
@utility utilityName {
  color: green;
}
@utility utilityName small {
  color: blue;
}
@component ComponentName {
  color: cyan;

  @modifier modifierName {
    color: yellow;
  }
  @descendent descendentName {
    color: navy;
  }
  @when stateName {
    color: crimson;
  }
}

@component-namespace nmsp {
  @component ComponentName {
    color: red;
  }
}

// POST
.u-utilityName {
  color: green;
}
.u-sm-utilityName {
  color: blue;
}
.ComponentName {
  color: cyan;
}
.ComponentName--modifierName {
  color: yellow;
}
.ComponentName-descendentName {
  color: navy;
}
.ComponentName.is-stateName {
  color: crimson;
}
.nmsp-ComponentName {
  color: red;
}

postcs­s-q­uan­tit­y-q­ueries

at least
:at-least( min)
at most
:at-most( max )
between
:between( min, max )
exactly
:exactly( count )
 

postcs­s-c­ircle

// PRE
.circle {
  circle: 100px red;
}

// POST
.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
}

postcs­s-p­osition

// PRE
.foo {
  position: absolute 10px 0;
}
.bar {
  position: fixed 0;
}
.baz {
  position: relative 30% auto 0;
}
.fab {
  position: absolute 10px 0 20px 30px;
}

// POST
.foo {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 10px;
  left: 0;
}
.bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.baz {
  position: relative;
  top: 30%;
  right: auto;
  bottom: 0;
  left: auto;
}
.fab {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 20px;
  left: 30px;
}
 

postcs­s-p­rop­ert­y-l­ookup

// PRE
.Test {
  margin-left: 20px;
  margin-right: @margin-left;
  color: red;
  background: @color url('test.png');
  line-height: 1.5;
  font-size: @(line-height)em;
}

// POST
.Test {
  margin-left: 20px;
  margin-right: 20px;
  color: red;
  background: red url('test.png');
  line-height: 1.5;
  font-size: 1.5em;
}

postcs­s-size

// PRE
.two {
    size: 20px 10px;
}
.one {
    size: 10px;
}

// POST
.two {
    width: 20px;
    height: 10px;
}
.one {
    width: 10px;
    height: 10px;
}

postcs­s-c­enter

// PRE
.foo {
  top: center;
  left: center;
}

//POST
.foo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

Download the postCSS Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/xtender_postcss.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.