yacp


#YACP  

Yet Another CSS Preprocessor.

Installation

``
$ npm install -g yacp
`

when use in HTML:

`
$ bower install client-yacp
`




Example

`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;
}
`

Features

- 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

$3

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;
}
`

$3

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.




Compile Options

`
$ 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
`

$3

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.

$3

Using with css-whitespace.

Option projects

- grunt-yacp

License

The MIT License (MIT)

Copyright (c) 2014 Masaaki Morishita