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?