; Some aliases for border-radius
border-radius[] = -webkit-border-radius
border-radius[] = -moz-border-radius
In CSS Crush vendor prefixes are automatically generated with aliases. Aliases are stored in a file (located in the same folder as the main script).
The aliases file is pre-populated with CSS properties, functions and @-rules that have vendor prefixed equivalents.
/* Before */
p { border-radius: 10px; }
/* After */
p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* Before */
div { background: #fff linear-gradient( left, red, white ) no-repeat; }
/* After */
div {
background: #fff -webkit-linear-gradient( left, red, white ) no-repeat;
background: #fff -moz-linear-gradient( left, red, white ) no-repeat;
background: #fff -ms-linear-gradient( left, red, white ) no-repeat;
background: #fff -o-linear-gradient( left, red, white ) no-repeat;
background: #fff linear-gradient( left, red, white ) no-repeat;
}
/* Before */
@keyframes myanim {
0% { left: 0; }
100% { left: 100px; }
}
/* After */
@-webkit-keyframes myanim {
0% { left: 0; }
100% { left: 100px; }
}
@-moz-keyframes myanim {
0% { left: 0; }
100% { left: 100px; }
}
@-ms-keyframes myanim {
0% { left: 0; }
100% { left: 100px; }
}
@keyframes myanim {
0% { left: 0; }
100% { left: 100px; }
}
/* Defining variables */
@define {
helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
brand-blue: #C1D9F5;
outer-width: 960px;
}
/* Applying variables with the dollar function */
@media only screen and ( max-width: $( outer-width ) ) {
ul, p {
font-family: $( helvetica );
background: $( brand-blue ) url( tile.png ) repeat-x;
}
}
/* Variable interpolation */
.greeting {
background-image: url(images/bg/tile-$( theme-name ).png)
content: "Hi $( username )!";
}
Variables are available in CSS Crush via a familiar syntax.
Declare variables in your CSS with an @-rule. Apply variables using a dollar function.
Variables can also be interpolated inside quoted strings and inside words.
Global variables and/or file scoped variables can be added dynamically (via PHP) at runtime in a number of ways.
/* Before */
@import "print.css" print;
@import url( "small-screen.css" ) screen and ( max-width: 500px );
/* After */
@media print {
/* Contents of print.css */
}
@media screen and ( max-width: 500px ) {
/* Contents of small-screen.css */
}
The CSS Crush script takes one CSS file as input, scans for @import directives, and includes them directly in the output file so no http requests are wasted.
If you specify a media designation following the import URL – as per the CSS 2.1 standard – the imported file contents will be wrapped in an @media block.
/* Before */
.column-1 {
width: percent( 200, 960 );
font-size: ( 12 / 16 )em;
}
/* After */
.column-1 {
width: 20.83333%;
font-size: 0.75em;
}
A small collection of custom functions are built-in to CSS Crush:
math : calculates expressions ( allowed operators: + - / * and parenthesis ), all other non numeric/decimal characters are ignored
percent : returns first argument as a percentage of the second argumentdata-uri : generates a data uri from a relative file pathh-adjust : manipulates the hue of a color values-adjust : manipulates the saturation of a color valuel-adjust : manipulates the lightness of a color valuea-adjust : manipulates the opacity of a color valueParenthesised expressions without a function name are shorthand for the math function (see example).
Data URIs are automatically generated when referencing images, svgs or web fonts inside the data-uri function:
/* Before */
ul li {
background-image: data-uri(../my-bg.png);
}
/* After */
ul li {
background-image: url("data:image/png;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
}
Color values can be lightened, darkened or desaturated using the l-adjust and s-adjust functions:
/* Before */
div {
/* Lighten by 10% */
color: l-adjust( hotpink 10% );
/* Desaturate */
background-color: s-adjust( #f00 -100% );
}
/* After */
div {
color: #ff9cce;
background-color: #808080;
}
/* Before */
p {
opacity: initial;
white-space: initial;
min-height: initial;
}
/* After */
p {
opacity: 1;
white-space: normal;
max-height: none;
}
If aliases are not sufficient, plugins (written in PHP) can make more extensive transformations.
There are quite a few bundled with CSS Crush which cover CSS3 compatibility, IE legacy hacks and experimental features such as composite pseudo classes.
Plugins can be disabled or enabled to suit.
/* Before */
:any( .sidebar, .block ) a:any( :hover, :focus ) {
color: red;
}
/* After */
.block a:hover,
.block a:focus,
.sidebar a:hover,
.sidebar a:focus {
color: red;
}
The experimental :any pseudo class is supported. Vendor prefixed implementations of :any are native in recent Mozilla and WebKit browsers.
By default all CSS Crush output is minified (you can disable minification by running in debug mode).
/* Before */
body {
padding: 0 0 0 0;
margin: 20px auto 0px;
background-color: #ffffff;
}
/* After */
body{padding:0;margin:20px auto 0;background-color:#fff}
The date-modified timestamp of the host-file and all the files files imported via @import are stored and checked on every subsequent running of the script. If any of the files have been modified a new file is compiled. If none have been modified a cached file is returned.
