Maro

A smarter Sass library

Sass
CSS
.box
  border-radius: 5px
  background: #ccc
  +size(800 400)
  margin: 0 auto
.box {
  border-radius: 5px;
  background: #ccc;
  width: 800px;
  height: 400px;
  margin: 0 auto;
}
.header
  background: red
  +position(absolute, 0 20 n, 2)
  text-align: center
.header {
  background: red;
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  z-index: 2;
  text-align: center;
}
h1
  color: #4d4d4d
  +font(36 1.5 bold)
  margin-bottom: 20px
h1 {
  color: #4d4d4d;
  font-size: 36px;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 20px;
}
a
  color: #590

  +hover
    color: black
    text-decoration: underline
a {
  color: #559900;
}

a:hover, a:focus {
  color: black;
  text-decoration: underline;
}

Smarter than most

Maro is a collection of highly unopinionated functions, mixins and variables that don't force you to follow a specific coding style.

It does all the hard work for you, and it's smart enough to guess things for you, so you don't have to remember everything.

Meticulously animated

All the styles and animations of Maro's website are made entirely with Sass and Maro. The goal is to make the website with 0% JavaScript and zero images. The result is an entertaining and relaxed set of semi-abstract animations and interactions.

Coming Soon!

Concept
Development
Tests
Release