PostCSS plugin CSS4 aspect-ratio property
npm install postcss-aspect-ratio-property[PostCSS] plugin The CSS Working Group have designed an aspect-ratio property for CSS.This plugin make this future feature available now..
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/supermonkeyz/postcss-aspect-ratio-property.svg
[ci]: https://travis-ci.org/supermonkeyz/postcss-aspect-ratio-property
[cr-img]: https://circleci.com/gh/supermonkeyz/postcss-aspect-ratio-property.svg?style=svg
[cr]: https://app.circleci.com/pipelines/github/supermonkeyz/postcss-aspect-ratio-property
``css`
.foo {
/ Input example /
aspect-ratio: 16/9;
}
`css
.foo {
/ Output example /
position: relative;
}
.foo::before {
content: '';
display: block;
padding-top: 56.25%;
}
.foo > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
`
Type: Object
default:
`js`
{
mainSelector: '.box'
}
`css`
.foo {
/ Input example /
aspect-ratio: 16/9;
}
...
`css`
.foo > .box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Step 1: Install plugin:
`sh`
npm install --save-dev postcss postcss-aspect-ratio-property
Step 2: Check you project for existed PostCSS config: postcss.config.js"postcss"
in the project root, section in package.jsonpostcss
or in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
Step 3: Add the plugin to plugins list:
`diff``
module.exports = {
plugins: [
+ require('postcss-aspect-ratio-property'),
require('autoprefixer')
]
}
[official docs]: https://github.com/postcss/postcss#usage