Core Features

Vendor prefixing

Edit ‘Vendor prefixing’ on Github

Vendor prefixes for properties, functions, @-rules and even full declarations are automatically generated – based on trusted sources – so you can maintain cross-browser support while keeping your source code clean and easy to maintain.

In some cases (e.g. CSS3 gradients) final syntax is incompatible with older prefixed syntax. In these cases the old syntax is polyfilled so you can use the correct syntax while preserving full support for older implementations.

.foo {
  background: linear-gradient(to right, red, white);
}
.foo {
  background: -webkit-linear-gradient(left, red, white);
  background: -moz-linear-gradient(left, red, white);
  background: linear-gradient(to right, red, white);
}
Example #1
@keyframes bounce {
  50% { transform: scale(1.4); }
}
@-webkit-keyframes bounce {
  50% {-webkit-transform: scale(1.4);
               transform: scale(1.4);}
}
@-moz-keyframes bounce {
  50% {-moz-transform: scale(1.4);
            transform: scale(1.4);}
}
@keyframes bounce {
  50% {-webkit-transform: scale(1.4);
          -moz-transform: scale(1.4);
           -ms-transform: scale(1.4);
               transform: scale(1.4);}
}
Example #2

Variables

Edit ‘Variables’ on Github

Declare variables in your CSS with a @define directive and use them with the $() function.

Variables can also be injected at runtime with the vars option.

/* Defining variables */
@define {
  dark: #333;
  light: #F4F2E2;
  smaller-screen: screen and (max-width: 800px);
}

/* Using variables */
@media $(smaller-screen) {
  ul, p {
    color: $(dark);
    /* Using a fallback value with an undefined variable */
    background-color: $(accent-color, #ff0);
  }
}
Example #3

/* String interpolation */
.username::before {
  content: "$(greeting)";
}
Example #4

Conditionals

Sections of CSS can be included and excluded on the basis of variable existence with the @ifdefine directive:

@define foo #f00;

@ifdefine foo {
  p {
    color: $(foo);
  }
}

p {
  font-size: 12px;
  @ifdefine not foo {
    line-height: 1.5;
  }
}
Example #5

Direct @import

Edit ‘Direct @import’ on Github

Files referenced with the @import directive are inlined directly to save on http requests. Relative URL paths in the CSS are also updated if necessary.

If you specify a media designation following the import URL — as per the CSS standard — the imported file content is wrapped in a @media block.

/* Standard CSS @import statements */
@import "print.css" print;
@import url( "small-screen.css" ) screen and ( max-width: 500px );
@media print {
  /* Contents of print.css */
}
@media screen and ( max-width: 500px ) {
  /* Contents of small-screen.css */
}
Example #6

Rule inheritance

Edit ‘Rule inheritance’ on Github

By using the @extend directive and passing it a named ruleset or selector from any other rule you can share styles more effectively across a stylesheet.

Abstract rules can be used if you just need to extend a generic set of declarations.

.negative-text {
  overflow: hidden;
  text-indent: -9999px;
}

.sidebar-headline {
  @extend .negative-text;
  background: url( headline.png ) no-repeat;
}
.negative-text,
.sidebar-headline {
  overflow: hidden;
  text-indent: -9999px;
}

.sidebar-headline {
  background: url( headline.png ) no-repeat;
}
Example #7

Inheritance is recursive:

.one { color: pink; }
.two { @extend .one; }
.three { @extend .two; }
.four { @extend .three; }
.one, .two, .three, .four { color: pink; }
Example #8

Extending with pseudo classes/elements

@extend arguments can adopt pseudo classes/elements by appending an exclamation mark:

.link-base {
  color: #bada55;
  text-decoration: underline;
}
.link-base:hover,
.link-base:focus {
  text-decoration: none;
}

.link-footer {
  @extend .link-base, .link-base:hover!, .link-base:focus!;
  color: blue;
}
.link-base,
.link-footer {
  color: #bada55;
  text-decoration: underline;
}

.link-base:hover,
.link-base:focus,
.link-footer:hover,
.link-footer:focus {
  text-decoration: none;
}

.link-footer {
  color: blue;
}
Example #9

The same outcome can also be achieved with an Abstract rule wrapper to simplify repeated use:

.link-base {
  color: #bada55;
  text-decoration: underline;
}
.link-base:hover,
.link-base:focus {
  text-decoration: none;
}

@abstract link-base {
  @extend .link-base, .link-base:hover!, .link-base:focus!;
}

.link-footer {
  @extend link-base;
  color: blue;
}
Example #10

Referencing rules by name

If you want to reference a rule without being concerned about later changes to the identifying selector use the @name directive:

.foo123 {
  @name foo;
  text-decoration: underline;
}

.bar {
  @include foo;
}
.baz {
  @extend foo;
}
Example #11

Abstract rules

Edit ‘Abstract rules’ on Github

Abstract rules are generic rules that can be extended with the @extend directive or mixed in (without arguments) like regular mixins with the @include directive.

@abstract ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@abstract heading {
  font: bold 1rem serif;
  letter-spacing: .1em;
}

.foo {
  @extend ellipsis;
  display: block;
}
.bar {
  @extend ellipsis;
  @include heading;
}
.foo,
.bar {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foo {
  display: block;
}
.bar {
  font: bold 1rem serif;
  letter-spacing: .1em;
}
Example #12

Functions

math()

Edit ‘math()’ on Github

Evaluate a raw mathematical expression.

math( expression [, unit] )

font-size: math( 12 / 16, em );
font-size: 0.75em;
Example #13

percent()

Edit ‘percent()’ on Github

Calculate a percentage value based on two given values.

percent( value1, value2 [, precision = 5] )

Params

  • value1 Number
  • value2 Number
  • precision Integer The number of decimal places to round to. Defaults to 5

Returns

value1 as a percentage of value2.

width: percent( 20, 960 );
width: 2.08333%;
Example #14

h-adjust()

Edit ‘h-adjust()’ on Github

Adjust the hue of a color value.

h-adjust( color, offset )

Params

  • color Any valid CSS color value
  • offset The percentage to offset the color hue (percent mark optional)

Returns

The modified color value.

color: h-adjust( deepskyblue -10 );
Example #15

s-adjust()

Edit ‘s-adjust()’ on Github

Adjust the saturation of a color value.

s-adjust( color, offset )

Params

  • color Any valid CSS color value
  • offset The percentage to offset the color hue (percent mark optional)

Returns

The modified color value.

/* Desaturate */
color: s-adjust( deepskyblue -100 );
Example #16

l-adjust()

Edit ‘l-adjust()’ on Github

Adjust the lightness of a color value.

l-adjust( color, offset )

Params

  • color Any valid CSS color value
  • offset The percentage to offset the color hue (percent mark optional)

Returns

The modified color value.

color: l-adjust( deepskyblue 10 );
Example #17

a-adjust()

Edit ‘a-adjust()’ on Github

Manipulate the opacity (alpha channel) of a color value.

a-adjust( color, offset )

Params

  • color Any valid CSS color value
  • offset The percentage to offset the color opacity

Returns

The modified color value

/* Reduce color opacity by 10% */
color: a-adjust( rgb(50,50,0) -10 );
Example #18

hsl-adjust()

Edit ‘hsl-adjust()’ on Github

Manipulate the hue, saturation and lightness of a color value

hsl-adjust( color, hue-offset, saturation-offset, lightness-offset )

Params

  • color Any valid CSS color value
  • hue-offset The percentage to offset the color hue
  • saturation-offset The percentage to offset the color saturation
  • lightness-offset The percentage to offset the color lightness

Returns

The modified color value

/* Lighten and increase saturation */
color: hsl-adjust( red 0 5 5 );
Example #19

hsla-adjust()

Edit ‘hsla-adjust()’ on Github

Manipulate the hue, saturation, lightness and opacity of a color value.

hsl-adjust( color, hue-offset, saturation-offset, lightness-offset, alpha-offset = 0 )

Params

  • color Any valid CSS color value
  • hue-offset The percentage to offset the color hue
  • saturation-offset The percentage to offset the color saturation
  • lightness-offset The percentage to offset the color lightness
  • alpha-offset The percentage to offset the color opacity

Returns

The modified color value.

color: hsla-adjust( #f00 0 5 5 -10 );
Example #20

data-uri()

Edit ‘data-uri()’ on Github

Create a data-uri.

data-uri( url )

Params

  • url URL of an asset

url cannot be external, and must not be written with an http protocol prefix.

The following file extensions are supported: jpg, jpeg, gif, png, svg, svgz, ttf, woff

Returns

The created data-uri as a string inside a CSS url().

background: silver data-uri(../images/stripe.png);
background: silver url(data:<img-data>);
Example #21

this()

Edit ‘this()’ on Github

Reference another property value from the same containing block.

Restricted to referencing properties that don't already reference other properties.

this( property-name, fallback )

Params

  • property-name Property name
  • fallback A CSS value

Returns

The referenced property value, or the fallback if it has not been set.

.foo {
  width: this( height );
  height: 100em;
}
Example #22

/* The following both fail because they create circular references. */
.bar {
  height: this( width );
  width: this( height );
}
Example #23

query()

Edit ‘query()’ on Github

Copy a value from another rule.

query( reference [, property-name = default] [, fallback] )

Params

  • reference A CSS selector to match, or abstract rule name
  • property-name The CSS property name to copy, or just 'default' to pass over. Defaults to the calling property
  • fallback A CSS value to use if the target property does not exist

Returns

The referenced property value, or the fallback if it has not been set.

.foo {
  width: 40em;
  height: 100em;
}

.bar {
  width: query( .foo ); /* 40em */
  margin-top: query( .foo, height ); /* 100em */
  margin-right: query( .foo, top, auto ); /* auto */
  margin-bottom: query( .foo, default, 3em ); /* 3em */
}
Example #24

Selector grouping

Edit ‘Selector grouping’ on Github

Selector grouping with the :any pseudo class (modelled after CSS4 :matches) simplifies the creation of complex selector chains.

:any( .sidebar, .block ) a:any( :hover, :focus ) {
  color: lemonchiffon;
}
.block a:hover,
.block a:focus,
.sidebar a:hover,
.sidebar a:focus {
  color: lemonchiffon;
}
Example #25

Selector aliases

Edit ‘Selector aliases’ on Github

Selector aliases can be useful for grouping together common selector chains for reuse.

They're defined with the @selector-alias directive, and can be used anywhere you might use a psuedo class.

/* Defining selector aliases */
@selector-alias heading :any(h1, h2, h3, h4, h5, h6);
@selector-alias radio input[type="radio"];
@selector-alias hocus :any(:hover, :focus);

/* Selector aliases with arguments */
@selector-alias class-prefix :any([class^="#(0)"], [class*=" #(0)"]);
@selector-alias col :class-prefix(-col);

.sidebar :heading {
  color: honeydew;
}

:radio {
  margin-right: 4px;
}

:col {
  float: left;
}

p a:hocus {
  text-decoration: none;
}
.sidebar h1, .sidebar h2,
.sidebar h3, .sidebar h4,
.sidebar h5, .sidebar h6 {
  color: honeydew;
}

input[type="radio"] {
  margin-right: 4px;
}

[class^="col-"],
[class*=" col-"] {
  border: 1px solid rgba(0,0,0,.5);
}

p a:hover,
p a:focus {
  text-decoration: none;
}
Example #26

Selector splatting

Selector splats are a special kind of selector alias that expand using passed arguments.

@selector-splat input input[type="#(text)"];

form :input(time, text, url, email, number) {
  border: 1px solid;
}
form input[type="time"],
form input[type="text"],
form input[type="url"],
form input[type="email"],
form input[type="number"] {
  border: 1px solid;
}
Example #27

Nesting

Edit ‘Nesting’ on Github

Block nesting is done with the @in directive. Especially useful for when you need to group lots of styles under a common selector prefix.

Note use of the parent selector &:

@in .homepage {
  @in .content {
    p {
      font-size: 110%;
    }
  }
  &.blue {
    color: powderblue;
  }
  .no-js & {
    max-width: 1024px;
  }
}
.homepage .content p {
  font-size: 110%;
}
.homepage.blue {
  color: powderblue;
}
.no-js .homepage {
  max-width: 1024px;
}
Example #28

Mixins

Edit ‘Mixins’ on Github

Mixins make reusing small snippets of CSS much simpler. You define them with the @mixin directive.

Positional arguments via the argument function #() extend the capability of mixins for repurposing in different contexts.

@mixin display-font {
  font-family: "Arial Black", sans-serif;
  font-size: #(0); 
  letter-spacing: #(1);
}

/* Another mixin with default arguments */
@mixin blue-theme {
  color: #(0 navy);
  background-image: url("images/#(1 cross-hatch).png");
}

/* Applying the mixins */
.foo {
  @include display-font(100%, .1em), blue-theme;
}
.foo {
  font-family: "Arial Black", sans-serif;
  font-size: 100%;
  letter-spacing: .1em;
  color: navy;
  background-image: url("images/cross-hatch.png");
}
Example #29

Skipping arguments

Mixin arguments can be skipped by using the default keyword:

@mixin display-font {
  font-size: #(0 100%);
  letter-spacing: #(1);
}

/* Applying the mixin skipping the first argument so the
   default value is used instead */
#foo {
  @include display-font(default, .3em);
}
Example #30

Sometimes you may need to use the same positional argument more than once. In this case the default value only needs to be specified once:

@mixin square {
  width:  #(0 10px);
  height: #(0);
}

.foo {
  @include square;
}
#foo {
  width:  10px;
  height: 10px;
}
Example #31

Mixing-in from other sources

Normal rules and abstract rules can also be used as static mixins without arguments:

@abstract negative-text {
  text-indent: -9999px;
  overflow: hidden;
}

#main-content .theme-border {
  border: 1px solid maroon;
}

.foo {
  @include negative-text, #main-content .theme-border;
}
Example #32

Fragments

Edit ‘Fragments’ on Github

Fragments – defined and invoked with the @fragment directive – work in a similar way to mixins, except that they work at block level:

@fragment input-placeholder {
  #(1)::-webkit-input-placeholder { color: #(0); }
  #(1):-moz-placeholder           { color: #(0); }
  #(1)::placeholder               { color: #(0); }
  #(1).placeholder-state          { color: #(0); }
}

@fragment input-placeholder(#777, textarea);
textarea::-webkit-input-placeholder { color: #777; }
textarea:-moz-placeholder           { color: #777; }
textarea::placeholder               { color: #777; }
textarea.placeholder-state          { color: #777; }
Example #33

Plugins

aria

Edit ‘aria’ on Github

Pseudo classes for working with ARIA roles, states and properties.

:role(tablist) {...}
:aria-expanded {...}
:aria-expanded(false) {...}
:aria-label {...}
:aria-label(foobarbaz) {...}
[role="tablist"] {...}
[aria-expanded="true"] {...}
[aria-expanded="false"] {...}
[aria-label] {...}
[aria-label="foobarbaz"] {...}
Example #34

canvas

Edit ‘canvas’ on Github

Bitmap image generator.

Requires the GD image library bundled with PHP.

/* Create square semi-opaque png. */
@canvas foo {
  width: 50;
  height: 50;
  fill: rgba(255, 0, 0, .5);
}

body {
  background: white canvas(foo);
}
Example #35

/* White to transparent east facing gradient with 10px
   margin and background fill. */
@canvas horz-gradient {
  width: #(0);
  height: 150;
  fill: canvas-linear-gradient(to right, #(1 white), #(2 rgba(255,255,255,0)));
  background-fill: powderblue;
  margin: 10;
}

/* Rectangle 300x150. */
body {
  background: canvas(horz-gradient, 300);
}
/* Flipped gradient, using canvas-data() to generate a data URI. */
.bar {
  background: canvas-data(horz-gradient, 100, rgba(255,255,255,0), white);
}
Example #36

/* Google logo resized to 400px width and given a sepia effect. */
@canvas sepia {
  src: url(http://www.google.com/images/logo.png);
  width: 400;
  canvas-filter: greyscale() colorize(45, 45, 0);
}

.bar {
  background: canvas(sepia);
}
Example #37

color

Edit ‘color’ on Github

Define custom color keywords.

Standard color keywords (e.g. blue, red) cannot be overridden.

@color {
  acme-blue: s-adjust(blue -10);
  kolanut: #D0474E;
}

@color vanilla #FBF7EC;


/* Usage is the same as with native color keywords */
p {
  color: vanilla;
  border: 1px solid acme-blue;
}
Example #38

ease

Edit ‘ease’ on Github

Expanded easing keywords for transitions.

  • ease-in-out-back
  • ease-in-out-circ
  • ease-in-out-expo
  • ease-in-out-sine
  • ease-in-out-quint
  • ease-in-out-quart
  • ease-in-out-cubic
  • ease-in-out-quad
  • ease-out-back
  • ease-out-circ
  • ease-out-expo
  • ease-out-sine
  • ease-out-quint
  • ease-out-quart
  • ease-out-cubic
  • ease-out-quad
  • ease-in-back
  • ease-in-circ
  • ease-in-expo
  • ease-in-sine
  • ease-in-quint
  • ease-in-quart
  • ease-in-cubic
  • ease-in-quad

See easing demos for live examples.

transition: .2s ease-in-quad;
transition: .2s cubic-bezier(.550,.085,.680,.530);
Example #39

forms

Edit ‘forms’ on Github

Pseudo classes for working with forms.

:input(date, search, email) {...}
:checkbox {...}
:radio {...}
:text {...}
input[type="date"], input[type="search"], input[type="email"] {...}
input[type="checkbox"] {...}
input[type="radio"] {...}
input[type="text"] {...}
Example #40

hocus-pocus

Edit ‘hocus-pocus’ on Github

Composite :hover/:focus/:active pseudo classes.

a:hocus { color: red; }
a:pocus { color: red; }
a:hover, a:focus { color: red; }
a:hover, a:focus, a:active { color: red; }
Example #41

hsl2hex

Edit ‘hsl2hex’ on Github

Convert colors in hsl() notation to hex notation.

color: hsl( 100, 50%, 50%);
color: #6abf40;
Example #42

ie-inline-block

Edit ‘ie-inline-block’ on Github

Polyfill for display:inline-block in IE < 8

display: inline-block;
display: inline-block;
*display: inline;
*zoom: 1;
Example #43

ie-opacity

Edit ‘ie-opacity’ on Github

Polyfill for opacity in IE < 9

opacity: 0.45;
opacity: 0.45;
-ms-filter: "alpha(opacity=45)";
*filter: alpha(opacity=45);
zoom: 1;
Example #44

initial

Edit ‘initial’ on Github

Polyfill for the 'initial' keyword

opacity: initial;
white-space: initial;
min-height: initial;
opacity: 1;
white-space: normal;
max-height: auto;
Example #45

legacy-flexbox

Edit ‘legacy-flexbox’ on Github

Polyfill to auto-generate legacy flexbox syntaxes.

Works in conjunction with aliases to support legacy flexbox (flexbox 2009) syntax with modern flexbox.

display: flex;
flex-flow: row-reverse wrap;
justify-content: space-between;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-lines: wrap;
-moz-box-lines: wrap;
-webkit-flex-flow: row-reverse wrap;
-ms-flex-flow: row-reverse wrap;
flex-flow: row-reverse wrap;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
Example #46

Caveats

Firefox's early flexbox implementation (Firefox < 22) has several non-trivial issues:

  • With flex containers display: -moz-box generates an inline-block element, not a block level element as in other implementations. Suggested workaround is to set width: 100%, in conjunction with box-sizing: border-box if padding is required.
  • The width of flex items can only be set in pixels.
  • Flex items cannot be justified. I.e. -moz-box-pack: justify does not work.

loop

Edit ‘loop’ on Github

For...in loops with lists and generator functions.

@for fruit in apple, orange, pear {
  .#(fruit) {
    background-image: url("images/#(fruit).jpg");
  }
}
.apple { background-image: url(images/apple.jpg); }
.orange { background-image: url(images/orange.jpg); }
.pear { background-image: url(images/pear.jpg); }
Example #47
@for base in range(2, 24) {
  @for i in range(1, #(base)) {
    .grid-#(i)-of-#(base) {
      width: math(#(i) / #(base) * 100, %);
    }
  }
}
.grid-1-of-2 { width: 50%; }
.grid-2-of-2 { width: 100%; }
/*
    Intermediate steps ommited.
*/
.grid-23-of-24 { width: 95.83333%; }
.grid-24-of-24 { width: 100%; }
Example #48
/* The last argument to color-range() is an integer
   specifying how many transition colors to generate
   between the color arguments. */
@for color in color-range(powderblue, deeppink, a-adjust(yellow, -80), 5) {
  .foo-#(loop.counter) {
    background-color: #(color);
  }
}
.foo-1 { background-color: #b0e0e6; }
.foo-2 { background-color: #bdbed8; }
/*
    Intermediate steps ommited
*/
.foo-12 { background-color: rgba(255,216,25,.33); }
.foo-13 { background-color: rgba(255,255,0,.2); }
Example #49

noise

Edit ‘noise’ on Github

Functions for generating noise textures with SVG filters.

Supported in any browser that supports SVG filters (IE > 9 and most other browsers).

noise() / turbulence()

Both functions work in the same way, the difference being noise() uses feTurbulence type 'fractalNoise' and turbulence() uses feTurbulence type 'turbulence'.

noise/turbulence(
  [ <fill-color> || <size> ]?
  [, <frequency> <octaves>? <sharpness>? ]?
  [, <blend-mode> || <fade> ]?
  [, <color-filter> <color-filter-value> ]?
)
Example #50

Params

  • fill-color - Any valid CSS color value.
  • size - Pixel size of canvas in format WxH (e.g. 320x480).
  • frequency - Number. Noise frequency; useful values are between 0 and 1. X and Y frequencies can be specified by joining two numbers with a colon.
  • octaves - Number. Noise complexity.
  • sharpness - Noise sharpening; possible values "normal" and "sharpen"
  • blend-mode - Blend mode for overlaying noise filter; possible values "normal", "multiply", "screen", "darken" and "lighten"
  • fade - Ranged number (0-1). Opacity of noise effect.
  • color-filter - Color filter type; possible values "hueRotate" and "saturate"
  • color-filter-value - Mixed. For "hueRotate" a degree as number. For "saturate" a ranged number (0-1).

Returns

A data-uri.

/* Grainy noise with 50% opacity and de-saturated.
   Demonstrates the "default" keyword for skipping arguments. */
background-image: noise( slategray, default, .5, saturate 0 );
Example #51

/* Cloud effect. */
background: noise( 700x700 skyblue, .01 4 normal, screen, saturate 0 );
Example #52

/* Typical turbulence effect. */
background: turbulence();
Example #53

/* Sand effect. */
background: turbulence( wheat 400x400, .35:.2 4 sharpen, normal, saturate .4 );
Example #54

property-sorter

Edit ‘property-sorter’ on Github

Property sorting.

Examples use the predefined property sorting table. To define a custom sorting order pass an array to csscrush_set_property_sort_order()

color: red;
background: #000;
opacity: .5;
display: block;
position: absolute;
position: absolute;
display: block;
opacity: .5;
color: red;
background: #000;
Example #55

px2em

Edit ‘px2em’ on Github

Functions for converting pixel values into em (px2em) or rem (px2rem) values

For both functions the optional second argument is base font-size for calculation though usually not required when converting pixel to rem.

Settings

px2em-base

The default base pixel value (16px by default) used for px2em conversion.

px2rem-base

The default base pixel value (16px by default) used for px2rem conversion.

font-size: px2em(11 13);
font-size: px2rem(16);
font-size: .84615em;
font-size: 1rem;
Example #56

rem

Edit ‘rem’ on Github

Polyfill for the rem (root em) length unit.

No version of IE to date (IE <= 10) resizes text set with pixels though IE > 8 supports rem units which are resizeable.

Settings

rem-mode

Has the following possible values:

  • rem-fallback (default) - rem to px, with converted value as fallback.
font-size: 1rem;
font-size: 16px;
font-size: 1rem;
Example #57
  • px-fallback - px to rem, with original pixel value as fallback.
font-size: 16px;
font-size: 16px;
font-size: 1rem;
Example #58
  • convert - in-place px to rem conversion.
font-size: 16px;
font-size: 1rem;
Example #59

rem-all

To convert all length values, not just values of the font related properties, set rem-all with a value of yes.

svg-gradients

Edit ‘svg-gradients’ on Github

Functions for creating SVG gradients with a CSS gradient like syntax.

Primarily useful for supporting Internet Explorer 9.

svg-linear-gradent()

Syntax is the same as linear-gradient()

svg-linear-gradent( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
Example #60

Returns

A base64 encoded svg data-uri.

Known issues

Color stops can only take percentage value offsets.

background-image: svg-linear-gradient( to top left, #fff, rgba(255,255,255,0) 80% );
background-image: svg-linear-gradient( 35deg, red, gold 20%, powderblue );
Example #61

svg-radial-gradent()

Syntax is similar to but more limited than radial-gradient()

svg-radial-gradent( [ <origin> | at <position> ,]? <color-stop> [, <color-stop>]+ )
Example #62

Returns

A base64 encoded svg data-uri.

Known issues

Color stops can only take percentage value offsets. No control over shape - only circular gradients - however, the generated image can be stretched with background-size.

background-image: svg-radial-gradient( at center, red, blue 50%, yellow );
background-image: svg-radial-gradient( 100% 50%, rgba(255,255,255,.5), rgba(255,255,255,0) );
Example #63

svg

Edit ‘svg’ on Github

Define and embed simple SVG elements, paths and effects inside CSS

@svg foo {
  type: star;
  star-points: #(0 5);
  radius: 100 50;
  margin: 20;
  stroke: black;
  fill: red;
  fill-opacity: .5;
}

/* Embed SVG with svg() function (generates an svg file). */
body {
  background: svg(foo);
}
/* As above but a 3 point star creating a data URI instead of a file. */
body {
  background: svg-data(foo, 3);
}
Example #64

/* Using path data and stroke styles to create a plus sign. */
@svg plus {
  d: "M0,5 h10 M5,0 v10";
  width: 10;
  height: 10;
  stroke: white;
  stroke-linecap: round;
  stroke-width: 2;
}
Example #65

/* Skewed circle with radial gradient fill and drop shadow. */
@svg circle {
  type: circle;
  transform: skewX(30);
  diameter: 60;
  margin: 20;
  fill: svg-radial-gradient(at top right, gold 50%, red);
  drop-shadow: 2 2 0 rgba(0,0,0,1);
}
Example #66

/* 8-sided polygon with an image fill.
   Note: images usually have to be converted to data URIs, see known issues below. */
@svg pattern {
  type: polygon;
  sides: 8;
  diameter: 180;
  margin: 20;
  fill: pattern(data-uri(kitten.jpg), scale(1) translate(-100 0));
  fill-opacity: .8;
}
Example #67

Known issues

Firefox does not allow linked images (or other svg) when svg is in "svg as image" mode.

text-align

Edit ‘text-align’ on Github

Polyfill for direction sensitive text-align values, start and end.

Settings

dir

Text direction. Value is ltr by default. If set to rtl, start translates to right and end translates to left

text-align: start;
text-align: left;
text-align: start;
Example #68

API

API functions

Edit ‘API functions’ on Github

csscrush_file()

Process host CSS file and return the compiled file URL.

csscrush_file( string $file [, array $options ] )

csscrush_tag()

Process host CSS file and return an HTML link tag with populated href.

csscrush_tag( string $file [, array $options [, array $attributes ]] )

csscrush_inline()

Process host CSS file and return CSS as text wrapped in html style tags.

csscrush_inline( string $file [, array $options [, array $attributes ]] )

csscrush_string()

Compile a raw string of CSS string and return it.

csscrush_string( string $string [, array $options ] )

csscrush_stat()

Retrieve statistics from the most recent compiled file. Available stats include selector_count, rule_count and compile_time.

csscrush_stat()

csscrush_version()

Get the library version.

csscrush_version()

csscrush_get()

Retrieve a config setting or option default.

  • $object_name Name of object you want to inspect: 'config' or 'options'.
  • $property

csscrush_get( string $object_name, string $property )

csscrush_set()

Set a config setting or option default.

  • $object_name Name of object you want to modify: 'config' or 'options'.
  • $settings Assoc array of keys and values to set, or callable which argument is the object specified in $object_name.

csscrush_set( string $object_name, mixed $settings )

Options

Edit ‘Options’ on Github
Option Values (default in bold) Description
minify true | false | Array Enable or disable minification. Optionally specify an array of advanced minification parameters. Currently the only advanced option is 'colors', which will compress all color values in any notation.
formatter block | single-line | padded Set the formatting mode. Overrides minify option if both are set.
newlines use-platform | windows/win | unix Set the output style of newlines
boilerplate true | false | Path Prepend a boilerplate to the output file
versioning true | false Append a timestamped querystring to the output filename
vars Array An associative array of CSS variables to be applied at runtime. These will override variables declared globally or in the CSS.
cache true | false Turn caching on or off.
output_dir Path Specify an output directory for compiled files. Defaults to the same directory as the host file.
output_file Output filename Specify an output filename (suffix is added).
asset_dir Path Directory for SVG and image files generated by plugins (defaults to the main file output directory).
stat_dump false | true | Path Save compile stats and variables to a file in json format.
vendor_target "all" | "moz", "webkit", ... | Array Limit aliasing to a specific vendor, or an array of vendors.
rewrite_import_urls true | false | "absolute" Rewrite relative URLs inside inlined imported files.
enable Array An array of plugin names to enable.
disable Array | "all" An array of plugin names to disable. This option is always evaluated before enable.
source_map true | false Output a source map (compliant with the Source Map v3 proposal).
trace true | false Output SASS debug-info stubs for use with tools like FireSass.
context Path Context for importing resources from relative urls (Only applies to `csscrush_string()` and command line utility).
doc_root Path Specify an alternative server document root for situations where the CSS is being served behind an alias or url rewritten path.
settings Array An associative array of plugin and environment settings. Used primarily for plugin configuration.

Settings

Edit ‘Settings’ on Github

Plugins sometimes use settings to configure their behaviour.

Settings can be specified as an option, or declared in CSS with block or single-line syntax:

@settings {
  dir: ltr;
}

@settings rem-mode px-fallback;
Example #69

Getting Started

Download

Edit ‘Download’ on Github

If you're using Composer you can use Crush in your project with the following line in your terminal:

composer require css-crush/css-crush:dev-master
Example #70

If you're not using Composer yet just download the library (zip or tar) into a convenient location and require the bootstrap file:

<?php require_once 'path/to/CssCrush.php'; ?>
Example #71