SASS Variables

Using Solid Variables in Custom SCSS

By importing Solid as an SCSS partial you get access to all of Solid's SASS variables. Use these to keep your styles consistent whenever you write custom SCSS.

Typography

Used by the typography utility classes.

Text Sizes

.my-custom-text-element {
  font-size: $text-1;
}
$text-1 $text-2 $text-3 $text-4 $text-5 $text-6

Line Heights

  .my-custom-text-element {
  line-height: $line-height-1;
}
  
$line-height-1 $line-height-2 $line-height-3

Font Styles

.my-custom-text-element {
  font-family: $sans;
  font-weight: $bold;
}
$sans $slab $regular $bold $xbold

Colors

Used by the color utility classes.

Fill Colors

.my-custom-element {
  background-color: $fill-blue;
}
$fill-red $fill-red-lighter $fill-pink $fill-blue $fill-yellow $fill-yellow-lighter $fill-green $fill-green-lighter $fill-orange $fill-promoted-orange $fill-gray-lighter $fill-gray $fill-gray-darker $fill-white

Social Fill Colors

.my-custom-element {
  background-color: $fill-facebook;
}
$fill-facebook $fill-buzzfeed $fill-twitter $fill-google $fill-linkedin $fill-pinterest $fill-tumblr $fill-youtube $fill-instagram $fill-vine $fill-snapchat

Text Colors

.my-custom-text-element {
  color: $text-gray;
}
$text-white $text-gray $text-gray-lighter $text-gray-lightest $text-red $text-pink $text-orange $text-promoted-orange $text-green $text-blue

Social Text Colors

.my-custom-text-element {
color: $text-facebook;
}
$text-facebook $text-twitter $text-google $text-linkedin $text-pinterest $text-tumblr $text-youtube $text-instagram

Layout

Used by the layout utility classes.

Spacing

.my-custom-element {
  margin-bottom: $space-2;
}
$space-05 $space-1 $space-2 $space-3 $space-4 $space-5 $space-6

Z-Index

.my-custom-element {
  z-index: $z4;
}
$z1 $z2 $z3 $z4

Borders

Used by the border utility classes.

.my-custom-element {
  border: $border;
  border-radius: $border-radius;
}
$border $border-lighter $border-radius

Disabled Opacity

Used by disabled buttons, forms, and pagination.

.my-custom-element {
  opacity: $opacity-disabled;
}
$opacity-disabled