postcss-ref 

PostCSS plugin to refer properties from another rule (@ref rule)

Spec

$3

This specification defines the @ref rule, which allows an author to refer properties in another style rule.

$3

``
@ref = @ref , ( ,)
`

#### Example

`css
.foo {
font-size: 12px;
color: #333;
}

.bar {
@ref .foo, font-size;
color: #444;
}
`

$3

You can pass an option to postcss-ref which lets you use ref as a function (ref()) instead of an atRule (@ref)

`
ref() = ref(, )
`

#### Example
`css
.foo {
font-size: 12px;
color: #333;
}

.bar {
font-size: ref(.foo, font-size);
color: #444;
}
`

$3

It also works with @media rules

`css
.foo {
font-size: 10px;
}

@media (min-width: 1602px) {
.foo {
font-size: 12px;
color: #333;
}
}

.bar {
@ref @media (min-width: 1602px) .foo, font-size;
}
`

or

`css
.bar {
font-size: ref(@media (min-width: 1602px) .foo, font-size);
}
`

This allows you to be more verbose with what you are doing.

Installation

`shell
$ npm install postcss-ref
`

How to use postcss-ref

$3

`js
// 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)
.css
`

Example

Input:

`css
.foo {
font-size: 12px;
color: #333;
}

.bar {
@ref .foo, font-size;
color: #444;
}
`

Output:

`css
.foo {
font-size: 12px;
color: #333;
}

.bar {
font-size: 12px;
color: #444;
}
`

$3

Input:

`css
.foo {
--font-m: 12px;
color: #333;
}

.bar {
@ref .foo, --font-m, font-size;
}
`

Output:

`css
.foo {
--font-m: 12px;
color: #333;
}

.bar {
font-size: var(--font-m);
}
`

Input:

`css
.foo {
--font-m: 12px;
color: #333;
}

.bar {
font-size: ref(.foo, --font-m);
}
`

Output:

`css
.foo {
--font-m: 12px;
color: #333;
}

.bar {
font-size: var(--font-m);
}
``

License

The MIT License (MIT)

Copyright (c) 2016 Masaaki Morishita