Show Menu
Cheatography

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%)
}

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

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.