Roole - A language that compiles to CSS

Rich Dynamic Features

Variables, loops, conditions, functions, etc

$ratio = @function $n, $sum {
  @return (100 / $sum * $n)%;
};

$max = 4;
@for $i in 1..$max {
  .span-{$i}of{$max} {
    width: $ratio($i, $max);
  }
}

.span-1of4 {
  width: 25%;
}

.span-2of4 {
  width: 50%;
}

.span-3of4 {
  width: 75%;
}

.span-4of4 {
  width: 100%;
}

Powerful Rule Manipulation Ability

Nesting, mixin, void, etc.

.btn {
  display: inline-block;
}

.btn.large {
  padding: 10px 15px;
}

.submit {
  @mixin .btn;

  @media (min-width: 768px) {
    @mixin .btn.large;
  }
}

.btn {
  display: inline-block;
}

.btn.large {
  padding: 10px 15px;
}

.submit {
  display: inline-block;
}
  @media (min-width: 768px) {
    .submit {
      padding: 10px 15px;
    }
  }

Auto-prefixing

Write standard CSS code that works everywhere.

@keyframes round {
  to {
    border-radius: 50%;
  }
}

@-webkit-keyframes round {
  to {
    -webkit-border-radius: 50%;
    border-radius: 50%;
  }
}

@-moz-keyframes round {
  to {
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
}

@-o-keyframes round {
  to {
    border-radius: 50%;
  }
}

@keyframes round {
  to {
    border-radius: 50%;
  }
}

JavaScript Based

Support Node.js and browsers. Embrace npm.

node_modules/tabs.roo/index.roo

.tabs {
  overflow: hidden;
}

.tab {
  float: left;
}

btn.roo

.btn {
  display: inline-block;
}

@import 'tabs.roo';
@import './btn.roo';

.tabs {
  overflow: hidden;
}

.tab {
  float: left;
}

.btn {
  display: inline-block;
}

And More

Explore the site to learn more.