.foo {
  background: linear-gradient(to right, red, white);
}

.foo {
  background: -webkit-linear-gradient(to right, red, white);
  background: linear-gradient(to right, red, white);
}

@keyframes bounce {
  50% { transform: scale(1.4); }
}

@-webkit-keyframes bounce {
  50% {-webkit-transform: scale(1.4);
               transform: scale(1.4);}
}
@keyframes bounce {
  50% {-webkit-transform: scale(1.4);
               transform: scale(1.4);}
}

.homepage {
  color: #333;
  background: white;
  .content {
    p {
      font-size: 110%;
    }
  }
}

.homepage {
  color: #333;
  background: white;
}
.homepage .content p {
  font-size: 110%;
}

.homepage {
  .no-js & {
    p {
      font-size: 110%;
    }
  }
}

.no-js .homepage p {
  font-size: 110%;
}

/* Defining variables */
@set {
  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);
  }
}

/* Interpolation */
.username::before {
  content: "$(greeting)";
}

@set foo #f00;
@set bar true;

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

p {
  font-size: 12px;
  @ifset not foo {
    line-height: 1.5;
  }
  @ifset bar(true) {
    margin-bottom: 5px;
  }
}

/* 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 */
}

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

.one { color: pink; }
.two { @extend .one; }
.three { @extend .two; }
.four { @extend .three; }

.one, .two, .three, .four { color: pink; }

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

.bar {
  @include foo;
}
.baz {
  @extend foo;
}

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

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

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

@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); }

@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%; }

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

.block a:hover,
.block a:focus,
.sidebar a:hover,
.sidebar a:focus {
  color: lemonchiffon;
}

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

/* Selector aliases with arguments */
@selector class-prefix :any([class^="#(0)"], [class*=" #(0)"]);
@selector 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;
}

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

@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");
}

@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);
}

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

.foo {
  @include square;
}

#foo {
  width:  10px;
  height: 10px;
}

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

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

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

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

: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"] {...}

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

body {
  background: white canvas(foo);
}

/* 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);
}

/* 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);
}

transition: .2s ease-in-quad;

transition: .2s cubic-bezier(.550,.085,.680,.530);

: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"] {...}

a:hocus { color: red; }
a:pocus { color: red; }

a:hover, a:focus { color: red; }
a:hover, a:focus, a:active { color: red; }

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

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

@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);
}

/* 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;
}

/* 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);
}

/* 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;
}

composer require css-crush/css-crush

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

npm install csscrush

const csscrush = require('csscrush');

// Compile. Returns promise.
csscrush.file('./styles.css', {sourceMap: true});

// Compile string of CSS. Returns promise.
csscrush.string('* {box-sizing: border-box;}');

// Compile and watch file. Returns event emitter (triggers 'data' on compile).
csscrush.watch('./styles.css');