HerrBertling

My team found it rather hard to determine which stage to use – or whether it would be easier to stay with a certain stage and enable some features specifically.

So I ended up with a table of postcss-cssnext features, their postcss-preset-env counterparts (where I knew the option name) and the stage for each feature.

• postcss-cssnext features are from the feature documentation page
• Deprecation infos are from the blogpost by @MoOx
• Stages are from the postcss-preset-env feature documentation page
• Option names are from @jonathantneal's comment

Here you go:

HerrBertling

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

$main-color: rgba(0,0,0,0.5)
$main-color-fallback: black

body
  @if variable-exists('main-color-fallback')

HerrBertling

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

// Breakpoints map
// @type Map
$breakpoints: ("baby-bear": "(max-width: 500px)", "mama-bear": "(max-width: 700px)", "papa-bear": "(max-width: 800px)", "super-bear": "(max-width: 1280px)", "reverso-baby-bear": "(min-width: 501px)", "reverso-mama-bear": "(min-width: 701px)", "reverso-papa-bear": "(min-width: 801px)", "reverso-super-bear": "(min-width: 1281px)", "exclusive-baby-bear": "(max-width: 500px)", "exclusive-mama-bear": "(min-width: 501px) and (max-width: 800px)","exclusive-papa-bear": "(min-width: 801px) and (max-width: 1280px)","iOS": "(min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px)")!default

// Enable/disable media queries

HerrBertling

<input type="checkbox" id="tpl-sidebar-switch">
    <div id="wrap">
        <section class="tpl-sidebar">
            <nav>
                <div class="navigation-colors">
                    <h1>I'm the navigation!</h1>
                </div>
            </nav>
            <div class="sidebar-options">
                <h1>I'm the sidebar!</h1>

HerrBertling

body,th,td{color:#36393a;font:normal 15px "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5rem}body,.jimdo-wrapper{max-width:1200px;margin:10px auto;padding:0}h1,h2,h3,h4{letter-spacing:0rem;font-weight:200;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5em;margin:1em 0 .5em}h1{font-size:3rem}h2{font-size:2.25rem}h3{font-size:1.5em}h4{font-size:1.25em}a:link,a:visited{background-color:none;border-bottom:0;color:#09e;-webkit-transition:color 150ms ease-in;-moz-transition:color 150ms ease-in;-ms-transition:color 150ms ease-in;-o-transition:color 150ms ease-in;transition:color 150ms ease-in}a:link:hover,a:visited:hover,a:link:focus,a:visited:focus,a:link:active,a:visited:active{background-color:none;color:#36393a}ul,ol,p,table{margin:0 0 1.5rem}ul{list-style-type:circle}dt em{border-bottom:1px dotted #a0a0a0;color:#d9534f}#banner{position:relative;margin-bottom:2rem}#banner #search input{font-size:.7333rem;padding:.3rem .5rem}#banner #search input[type=submit]{outline:0;border:1p

HerrBertling

{
  "Handwriting": [
    "Calligraffitti",
    "Coming Soon",
    "Crafty Girls",
    "Homemade Apple",
    "Just Another Hand",
    "Montez",
    "Permanent Marker",
    "Rancho",