PostCSS plugin to refer properties from another rule (@ref rule)
This specification defines the @ref rule, which allows an author to refer properties in another style rule.
@ref = @ref <selector-name>, <reffered-property-name>( ,<new-property-name>)
.foo {
font-size: 12px;
color: #333;
}
.bar {
@ref .foo, font-size;
color: #444;
}You can pass an option to postcss-ref which lets you use ref as a function (ref()) instead of an atRule (@ref)
ref() = ref(<selector-name>, <reffered-property-name>)
.foo {
font-size: 12px;
color: #333;
}
.bar {
font-size: ref(.foo, font-size);
color: #444;
}It also works with @media rules
.foo {
font-size: 10px;
}
@media (min-width: 1602px) {
.foo {
font-size: 12px;
color: #333;
}
}
.bar {
@ref @media (min-width: 1602px) .foo, font-size;
}or
.bar {
font-size: ref(@media (min-width: 1602px) .foo, font-size);
}This allows you to be more verbose with what you are doing.
$ npm install postcss-ref// dependencies
var fs = require("fs")
var postcss = require("postcss")
var ref = require("postcss-ref")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css
var output = postcss()
.use(ref()) // If using the function way change it to `ref({ atRule: false })`
.process(css)
.cssInput:
.foo {
font-size: 12px;
color: #333;
}
.bar {
@ref .foo, font-size;
color: #444;
}Output:
.foo {
font-size: 12px;
color: #333;
}
.bar {
font-size: 12px;
color: #444;
}Input:
.foo {
--font-m: 12px;
color: #333;
}
.bar {
@ref .foo, --font-m, font-size;
}Output:
.foo {
--font-m: 12px;
color: #333;
}
.bar {
font-size: var(--font-m);
}Input:
.foo {
--font-m: 12px;
color: #333;
}
.bar {
font-size: ref(.foo, --font-m);
}Output:
.foo {
--font-m: 12px;
color: #333;
}
.bar {
font-size: var(--font-m);
}The MIT License (MIT)
Copyright (c) 2016 Masaaki Morishita