starlet

Generates CSS from .strlt files. Very similar to Stylus, but with higher compression.

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