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