scarlet
Generates CSS from .scarlet files. Very similar to Stylus, but with higher compression.
Installation
go get -u github.com/aerogo/scarlet/...CLI
If you're looking for the official compiler, please install pack.
The CLI tool included in this repo offers a check to see if your classes are referenced or not via scarlet -check.
Basic usage
body
color black
font-size 100%
padding 1rem
State
a
color blue
:hover
color red
Classes
a
color blue
// "active" elements inside a link
.active
color red
// links that have the "active" class
&.active
color red
Multiple selectors
// All in one line
h1, h2, h3
color orange
// Split over multiple lines
h4,
h5,
h6
color purple
Variables
text-color = black
transition-speed = 200ms
body
font-size 100%
color text-color
a
color blue
transition color transition-speed ease
:hover
color red
Mixins
mixin horizontal
display flex
flex-direction row
mixin vertical
display flex
flex-direction column
Mixins can be used like this:
#sidebar
vertical
Animations
animation rotate
0%
transform rotateZ(0)
100%
transform rotateZ(360deg)
animation pulse
0%, 100%
transform scale3D(0.4, 0.4, 0.4)
50%
transform scale3D(0.9, 0.9, 0.9)
Quick media queries
body
vertical
> 800px
body
horizontal
Style
Please take a look at the style guidelines if you'd like to make a pull request.
Sponsors
 |
 |
 |
|---|---|---|
| Cedric Fung | Scott Rayapoullé | Eduard Urbach |
Want to see your own name here?