Roole – new CSS preprocessor

Roole, sources

Prefix

#box
  box-shadow: 0 1px 3px #000

// compiles to:

#box {
  -webkit-box-shadow: 0 1px 3px #000;
  -moz-box-shadow: 0 1px 3px #000;
  box-shadow: 0 1px 3px #000;
}

Variable

$margin = 20px 0
$margin ?= 30px 0

p
  margin: $margin

// compiles to:

p {
  margin: 20px 0;
}

@if

$color = black

body
  @if $color is white
    background: #fff
  @else if $color is black
    background: #000
  @else if $color is gray
    background: #999
  @else
    background: url(bg.png)

$size = large
$type = split

.button
  @if $size is large and $type is split
    padding: 10px

$width = 100px

.button
  @if $width < 100px
    border: none
  @else if $width >= 100px and $width < 200px
    border: 1px solid

// compiles to:

body {
  background: #000;
}

.button {
  padding: 10px;
}

.button {
  border: 1px solid;
}

@extend

.button
  display: inline-block
  border: 1px solid

.large-button
  @extend .button
  display: block

.dangerous-button
  @extend .button
  color: #fff
  background: red

#reset
  @extend .large-button, .dangerous-button
  margin: 0 20px

// compiles to:

.button,
.large-button,
.dangerous-button,
#reset,
#reset {
  display: inline-block;
  border: 1px solid;
}

.large-button,
#reset {
  display: block;
}

.dangerous-button,
#reset {
  color: #fff;
  background: red;
}

#reset {
  margin: 0 20px;
}

@void

@void
  .button
    display: inline-block

  .tabs
    .tab
      @extend .button
      float: left

#submit
  @extend .button

// compiles to:

#submit {
  display: inline-block;
}