Learn Bro in 5 minutes

Variable declaration

There are 2 types of variables: compile-time variables and CSS variables

var max-width = 1024px        // compile-time var
var primary* = blue           // CSS variable compiles to `--primary: blue`

const MAX_WIDTH = 1024px      // immutable compile-time variable
const secondary* = red        // immutable CSS variable `--secondary: red`

echo $max-width == 1024px
echo $primary // print blue

Data type

Variables can contain

• string
• int32, int
• size
• color (rgb rgba, hsl, hsla)
• bool
• float32, float
• array, object

Working with data types

var x = 123   // define a int var with implicit value
$x = "1"      // error -> type mismatch | got string expected int

var y: int    // define a variable with type
$y = "1"      // error -> type mismatch | got string expected int

const z = 0   // define a constant (immutable variable)
$z = 1        // error -> cannot assign twice to immutable variable

var c1: color         // typed variable definition
$c1 = deepskyblue     // assign a color

var sizes = {
  extraSmall: .75rem, // comma is optional here
  small: .9rem
  normal: 1rem
  medium: 1.25rem
  big: 2rem
  extraBig: 3.25rem
}

echo [bisque, darkorchid, deepskyblue] // an anonymous array
echo {default: 15px, secondary: 16px} // an anonymous object

Accessors

Access items in array by referring the index number of the item:

var myarr = [bisque, darkorchid, deepskyblue]
var index = 1

echo $myarr[2] // # deepskyblue
echo $myarr[$index] // darkorchid

For objects, we'll use the same square brackets, but instead of the index int we have string-based keys.

var myobj = {hello: "world"}
var key = "hello"

echo $myobj["hello"]  // world
echo $myobj[$key] // world

CSS Selectors

.btn-primary
  background-color: darkblue
  .btn-icon
    color: whitesmoke
  &:hover
    background-color: lighten(darkblue, 20%)

.icon
  height, width: 24px

Conditional statements

if, elif, else conditionals

if $color == lightgreen:
  // if body
elif $color == blue:
  // elif body
else:
  // else body

case block

case $color:
  of lightgreen:
    // body
  of blue:
    // ...
  else:
    // ...

Loops

const mainColors = [blue, black]
for $color in $mainColors:
  .btn-{$color}
    background-color: $color
    color: white

Functions

BASS functions are declared using fn and require that their parameter and return types be annotated. After the types and parameters, an = is used to denote the start of the function body. This is very similar with what we have in Nim for proc, func and method declarations.

Let's take a look:

fn hello(name: string): string =
  echo $name 
  return `Hello, ${name}!`

echo hello("Bubble")

Function overloading? No problem! You can have multiple functions with the same name but different parameter types and/or return type

fn hello(name: string, number: int): string =
  return `Bro, this is so cool!`

Magic functions

• @import
• @extend
• @json
• @yaml
• @mixin

@import

Import partials or any other stylesheets

@import "button.bass"

@extend

Similar with SASS @extend, no need for introduction

.form-control
  border-width: 2px

.form-control-dark
  @extend .form-control

@json

Transforms a JSON stream into a stylesheet

const config = @json "sample.json"

for $color in $config.colors:
  .btn-{$color}
    color: $color

@yaml

Basically, similar with @json

const config = @yaml "sample.yaml"

for $color in $config.colors:
  .btn-{$color}
    color: $color

Debugging with echo

Similar with @debug from SASS, echo outputs variable values and other expressions at compile-time.

var colors = [yellow, green, blue]
for $color in $colors:
  echo $color // yellow...

CSS Unit testing

var someColor = darkblue
assert $someColor != blue