No description or website provided.
CSS JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
.gitignore
gulpfile.js
package.json
readme.md

readme.md

PostCSS Sample

You can learn PostCSS from this sample

postcss-next

You can use latest CSS syntax like variables

before

:root {
    --primary-color: #e86100;
    --secondary-color: #2c3e50;
    --base-fontsize: 1rem;
}
.h1 {
    color: var(--primary-color);
}

after

.h1 {
    color: #e86100;
}

postcss-nested

before

.phone {
    &Title {
        width: 100px;

        &.titleRight {
            float: right;

            .link {
                color: $red;
            }
        }
    }
}

after

.phoneTitle {
    width: 100px;
}
.phoneTitle.titleRight {
    float: right;
}
.phoneTitle.titleRight .link {
    color: #f00;
}

postcss-mixins

before

@define-mixin icon $name {
        padding-left: 16px;

    &::after {
        content: "";
        background-url: url(/icons/$(name).png);
    }
}
.search {
    @mixin icon search ;
}

after

.search {
    padding-left: 16px;
}

.search::after {
    content: "";
    background-url: url(/icons/search.png);
}

postcss-simplevars

before

$dir:    top;
$blue:   #056ef0;
$column: 200px;

.menu_link {
    background: $blue;
    width: $column;
}
.menu {
    width: calc(4 * $column);
    margin-$(dir): 10px;
}

after

.menu_link {
    background: #056ef0;
    width: 200px;
}
.menu {
    width: calc(4 * 200px);
    margin-top: 10px;
}