Style 🎴

Provides powerful CSS builder 🍍

Usage

In CSS classes is

.myClass {
  background: url("image.png")
}

buildStyle:
  class myClass:
    background: url("image.png")

In CSS IDs is

#myElement {
  background: url("image.png")
}

buildStyle:
  id myElement:
    background: url("image.png")

In CSS it maybe:

@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

buildStyle:
  @supports (display: flex):
    @media screen and (min-width: 900.px):
      tag article:
        display: flex

macro buildStyle(body: untyped): untyped: Builds CSS in pure Nim

Support:

pseudo classes;

simple and complex properties;

@keyframes;

@media queries;

@charset, @supports, @container;

nim variables in double curly brackets

Example:

import strformat var nimVariable = "#fefefe" otherNimVariable = "rgb(100, 255, 100)" myCss = buildStyle: # Translates into @import url(...) import url("path/to/font") # Translates into .myClass class myClass: color: {{nimVariable}} background-color: {{otherNimVariable}} # Translates into #myId id myId: color: red # Translates into body tag body: color: white background: rgb(33, 33, 33) # Translates into @keyframes @keyframes animation: 0: # translates into 0% opacity: 0 tranform: translateX(-150.px) 100: # translates into 100% opacity: 1 transform: translateX(0.px) # Translates into @media ... @media screen and (min-width: 900.px): tag article: padding: 1.rem 3.rem # Translates into button:hover button@hover: color: red