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.

aerogo / scarlet

readme