Sass

Leap uses Sass to compile its CSS and has a Bourbon dependency to give us access to many handy mixins. On top of that, we include many variables, mixins and functions that are specific to our needs at Treehouse.

Variables

Most of our variables are built using Sass maps, which means they aren't easily accessible with a simple variable name. We've made functions to make access to those variables easier, we'll cover those below. Here are the variables that use regular variable names:

Typography

Used to set font family a font size.

Font-family

.custom-element
  font-family: $quicksand

$quicksand

Font-weight

.custom-element
  font-weight: $bold

$bold

Borders

Used in the border utility classes.

Border Color

.custom-element
  border-color: $border-color-dark

$border-color-dark $border-color-mid $border-color-normal $border-color-light

Border Radius

.custom-element
  border-radius: $border-radius

$border-radius

Grid

Used in the grid and breakpoint utility classes. Our -xs breakpoint doesn't have a variable because it is simply styling @media screen.

Grid Container

.custom-element
  width: $grid-width

$grid-width

Breakpoints

+media(min-width $sm)
  property: value

$sm $md $lg $xl

Functions

The rest of our variables are made with Sass maps, so we've created handy functions that make accessing them super easy. Note: these don't use the typical $ variable naming scheme, just the function name.

Typography

Used in our font size utility classes.

Font Size

.custom-element
  font-size: text-size(1)

text-size(1) text-size(2) text-size(3) text-size(4) text-size(5) text-size(6)

Spacing

Used in our layout utility classes.

Spacing Units

.custom-element
  margin: spacing(1)
  padding: spacing(2)

spacing(0) spacing(0.5) spacing(1) spacing(2) spacing(3) spacing(4) spacing(5) spacing(6)

Colors

Used in our color utility classes.

Brand Colors

.custom-element
  background-color: brand-color(green)

brand-color(green) brand-color(green-dark) brand-color(gray) brand-color(blue-light) brand-color(blue-medium) brand-color(blue-dark) brand-color(ubora-orange) brand-color(ubora-magenta) brand-color(ubora-magenta-dark) brand-color(ubora-green) brand-color(ubora-black) brand-color(ubora-mint)

Text Colors

.custom-element
  color: text-color(dark)

text-color(dark) text-color(medium) text-color(base) text-color(light)

Gray Colors

.custom-element
  fill: gray-color(gray-dark)

gray-color(gray-darker) gray-color(gray-dark) gray-color(gray) gray-color(gray-light) gray-color(gray-lighter)

Pop Colors

.custom-element
  background-color: pop-color(golden)

pop-color(blue-pastel) pop-color(blue) pop-color(blue-dark) pop-color(teal) pop-color(green) pop-color(golden) pop-color(orange) pop-color(red-orange) pop-color(purple-pastel) pop-color(purple) pop-color(magenta)

UI Colors

.custom-element
  background-color: ui-color(blue)

ui-color(blue) ui-color(green) ui-color(yellow) ui-color(orange) ui-color(red)

Mixins

Leap includes a few helpful mixins for common occuring styles or selectors.

Clearfix

.custom-selector
  +clearfix

+clearfix

Positioning

.custom-selector
  +absolute(top 0 left 10px)

+absolute($direction $amount) +relative($direction $amount) +fixed($direction $amount)

Media

.custom-selector
  +media(min-width $sm) {
    property: value
  }

+media($rule $breakpoint)

Placeholder Style

.custom-selector
  +placeholder-style
    property: value

+placeholder-style

Hover, Active, Focus

Can remove :focus by passing false into the mixin.

.custom-selector
  +selected
    property: value

+selected +selected(false)

Width and Height

.custom-selector
  +width-height(100px, 200px)

+width-height($width, $height)