yacp v0.9.2
#YACP (https://badges.gitter.im/Join Chat.svg)
Yet Another CSS Preprocessor.
Installation
$ npm install -g yacp
when use in HTML:
$ bower install client-yacp
Example
/* 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:
/* 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
Bind ruleset syntax
YACP provide Bind ruleset syntax.
Selectors rounded by ()
cannot cascade.
Using this feature, you can define encapsulated ruleset.
(.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;
}
Inherit other rulesets safely
One of fault of existin CSS Preprocessor is compiling any code which don't have syntax error.
This is 'dangerous' inheritance code (Sass):
.btn {
border-radius: 5px;
color: #fff;
padding: 6px 12px;
}
.btn-success {
@extend .btn;
background-color: #4dac26;
}
...
.btn {
padding: 8px 16px;
}
Yields:
.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.
Must use the placeholder selector (
%
). The Ruleset defined with placeholder selector don't output as CSS code.YACP's placeholder selector cannot cascade.
If inherited selectors have same properties, run error.
Ex (1, 2):
%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):
%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
strict mode
YACP's strict mode allow only class and pseudo-elements selector.
Following selectors cannot compile.
Ex:
#id {}
div {}
.class .nested {}
p.class {}
and prohibit !important
.
.class {
/* Error */
padding: 0 !important;
}
Using this option, you can keep specificity constant, so its code will be more maintenable.
whitespace mode
Using with css-whitespace.
Option projects
License
The MIT License (MIT)
Copyright (c) 2014 Masaaki Morishita
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago