npm install yacp
#YACP  
Yet Another CSS Preprocessor.
```
$ npm install -g yacp
when use in HTML:
``
$ bower install client-yacp
`css
/ Import your other CSS files /
@import url("foo.css")
/ Define variables in W3C syntax /
:root {
--font-lg: 18px;
}
/ Placeholder selector for extend /
%att {
color: red;
font-weight: normal;
}
.attBox {
extend: %att; / Extend %att /
box-shadow: 5px 5px;
font-size: var(--font-lg); / Use variable --font-lg /
padding: 5px 10px;
}
`
Compiled with the following command:
``
$ yacp input.css output.css
Yields:
`css
/ Expand foo.css /
.foo {
}
/ Inherited in .attBox /
.attBox {
color: red;
font-weight: normal;
}
.attBox {
-webkit-box-shadow: 5px 5px; / Automatically added vendor prefix /
box-shadow: 5px 5px;
font-size: 18px; / Expand the variable /
padding: 5px 10px;
}
`
- Automatic vendor-prefixed property
- Rulesets binding syntax
- Inherit other rules more safely
- W3C-style CSS variables syntax
- Support calc(), a feature to do simple calculations
- Read and inline css via @import
YACP provide Bind ruleset syntax.
Selectors rounded by () cannot cascade.
Using this feature, you can define encapsulated ruleset.
`css
(.btn) {
background-color; #4dac26;
border: solid 1px #2c9700;
color: #fff;
font-size: 16px;
padding: 12px 8px;
}
/ Error /
.btn {
padding: 15px 10px;
}
/ Error /
(.btn) {
padding: 15px 10px;
}
`
One of fault of existin CSS Preprocessor is compiling any code which don't have syntax error.
This is 'dangerous' inheritance code (Sass):
`css
.btn {
border-radius: 5px;
color: #fff;
padding: 6px 12px;
}
.btn-success {
@extend .btn;
background-color: #4dac26;
}
...
.btn {
padding: 8px 16px;
}
`
Yields:
`css
.btn, .btn-success {
border-radius: 5px;
color: #fff;
padding: 6px 12px;
}
.btn-success {
background-color: #4dac26;
}
...
.btn, .btn-success {
padding: 8px 16px;
}
`
When overwrite .btn, .btn-success is overwrote too, and it may cause unexpected result.
But, YACP's inheritance is safe. You can use with extend(s) or inherit(s) property.
1. Must use the placeholder selector (%). The Ruleset defined with placeholder selector don't output as CSS code.
2. YACP's placeholder selector cannot cascade.
3. If inherited selectors have same properties, run error.
Ex (1, 2):
`css
%btn {
border-radius: 5px;
color: #fff;
padding: 6px 12px;
}
.btn-success {
extend: %btn;
background-color: var(--color-green);
}
/ Error /
%btn {
padding: 8px 16px;
}
`
Ex (3):
`css
%foo {
font-size: 16px;
padding: 5px 10px;
}
%bar {
color: #fff;
font-size: 14px;
}
.baz {
/ Error /
extend: %foo;
extend: %bar;
}
`
Using this feature, you can define private (cannot overwrite and refer from only YACP code) ruleset.
``
$ yacp --help
`
Usage: yacp [options]
Options:
-c, --compress use output compression
-s, --strict use strict mode compile
-w, --whitespace use whitespace syntax like Stylus
-V, --versions output the version number
-h, --help output usage information
`
YACP's strict mode allow only class and pseudo-elements selector.
Following selectors cannot compile.
Ex:
`css
#id {}
div {}
.class .nested {}
p.class {}
`
and prohibit !important.
`css``
.class {
/ Error /
padding: 0 !important;
}
Using this option, you can keep specificity constant, so its code will be more maintenable.
Using with css-whitespace.
Copyright (c) 2014 Masaaki Morishita