Stylesheets ✨

[Ethosa]

Stylesheets ✨

[Ethosa]

buildStyle:
  .className {
    color: red,
    background-color: rgba(255, 255, 255, 0.1)
  }
  body {
    display: none
  }

[Ethosa]

New syntax:

var 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
  @supports (display: flex):
    @media screen and (min-width: 900.px):
      tag article:
        display: flex