Variable Documentation

Skeleton Sass 2 introduces many new things to the table as well as refining many things that Skeleton Sass 1 created. Variables are no exception and have been rethought completely.

Two Categories

Skeleton Sass 2 has two distinct categories of variables – global and theme-scoped variables.

Global Variables

The global variables are found in skeleton/core/_config.scss and are the default settings for Skeleton Sass 2. Let's begin by taking a look at each global variable.

Backgrounds

As it stands, Skeleton Sass 2 has only a single background variable that controls the color of the background on the body element.

$background-color: #fff !global; // default background color

Configuration

Skeleton Sass 2 introduces a some new players to the field and gives you better control when choosing your font unit of choice.

$use-rem: true !global; // use rem as default unit?
$use-em: false !global; // use em as default unit?
$use-percent: false !global; // use percentage as default unit?
$use-px-fallback: true !global; // allow for pixel fall back
```sass

* `$use-rem` uses [rem](http://snook.ca/archives/html_and_css/font-size-with-rem) units as a base rather than em units or absolute units like pixels.
* `$use-em` uses [em](http://www.impressivewebs.com/understanding-em-units-css/) units as the default
* `$use-percent` sets the default unit to percentages (a safe relative unit)

Out of the box, Skeleton Sass 2 uses rem units for all relative units including, but not limited to, font sizes, margins, and padding. We can **disable** the use of rem, em, and percentages by setting these variables all to false. This will enable pixels as the base unit.

* `$use-px-fallback` allows us to use a pixel fallback for legacy browsers that may not support our fancy units like rem or em.

###### Fonts

```sass
$font-size: 14px !global;  // default font size. Change here will adjust sizes across the board.
$font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !global; // default fonts
$heading-family: "Georgia", "Times New Roman", serif !global; // default heading (h1-h6) font
$font-color: #444 !global;  // default font color
$heading-color: #181818 !global; // default heading (h1-h6) color
$form-font: $font-family !global; // default form font
```sass

* `$font-size` sets the font size and will influence all of the calculations across the framework. Although we specify these units as pixels, they will be converted automatically for us during compilation.
* `$font-family` adjusts the family of font that is used by default. This is the font family used in the `body` element.
* `$heading-family` stays true to the origins of Skeleton Sass 2. Change this variable to use a different font for headings.
* `$font-color` adjusts the default font color specified in the `body` element.
* `$heading-color` adjusts the default color used for all the headings
* `$form-font` adjusts the font used with all the form elements that accept user input. By default, this font is the same as the `font-family`.

###### Links

```sass
$link-color: #333 !global; // default link color
$link-hover: #000 !global; // default link color on :hover
$link-decoration: underline !global; // default link decoration
```sass

* `$link-color` adjusts the link color. A change here will alter every link that is styled under the `a` element. If you have specific styles under a different selector, these styles will be overridden.
* `$link-hover` adjusts the color when the user hovers on a link. A change here will alter every link that is styled under the `a` element. If you have specific styles under a different selector, these styles will be overridden.
* `$link-decoration` adjusts whether or not all links have an underline by default or not. If `underline` is used, then all links will have an underline. If `none` is used, then all links will **not** have an underline on _any_ state unless you specify differently in your theme files.

###### Grid

```sass
$is-fluid: false !global; // Change to true to enable the fluid grid
$base-col-width: 40px !global; // The width of each columns
$base-gutter-width: 20px !global; // The space between columns
$base-col-count: 16 !global; // The number of columns
$base-width: if($is-fluid, 98%, ($base-col-width + $base-gutter-width) * $base-col-count) !global; // Calculated
```sass

* `$is-fluid` is a boolean (`true`/`false`) value that creates a fluid grid or a fixed grid.
* `$base-col-width` is the width of the column. By default, this value is 40px. When a fluid grid is used, this number is not factored into the calculation.
* `$base-gutter-width` is the width of the gutter, or margins on either side of the column. By default, we have a `20px` gutter width which means we have a `10px` of margins on left and right side of the column.
* `$base-col-count` is the number of columns to generate. This is the most important number when generating any grid.
* `$base-width` is the overall width of the `.container` element (the width of the grid). **Note:** this value is calculated automatically.

###### Breakpoints

```sass
$tablet-width: 768px !global; // the tablet width media query
$mobile-portrait-width: 300px !global; // the mobile portrait media query
$mobile-landscape-width: 420px !global; // the mobile landscape media query
$mobile-fluid-width: 100%; // this value is not used with breakpoints, it is used in generating a fluid grid for mobile devices
```sass

**Note:** these breakpoints are the _default_ in Skeleton Sass. It is best practice to let the content determine the breakpoints. We strongly recommend changing these values when appropriate.

* `$tablet-width` acts as the width for `.container` when using a fixed grid and serves as a breakpoint for tablet and mobile devices
* `$mobile-portrait-width` is the width of the `.container` when using a fixed layout
* `$mobile-landscape-width` is the width if the `.container` when using a fixed layout. This variable also serves as a breakpoint for mobile devices in landscape mode **after** we add 60 to our current number:
	* `@media only screen and (min-width: $mobile-landscape-width + 60) and (max-width: $tablet-width - 1)`
* `$mobile-fluid-width` is the with of `.container` when we use a fluid layout

###### Danger Zone

```sass
// ------ CHANGE MAY CAUSE UNDESIRED RESULTS
$base-font-size: 10px !global; // the font size in the html element so we can use ems and rems in a friendly way
```sass

Thankfully, we only have a single variable in our danger zone. `$base-font-size` is the home base for our relative font calculations. This font size is included in the `html` element (the root element in our [DOM](http://en.wikipedia.org/wiki/Document_Object_Model)). If you are unfamiliar with this usage then read on.

By default, most browsers don't have relative units setup in such a way that `1.2em` means a font with the same size as `12px`. If we set our default font size in the root of our DOM to `10px`, this means that for every child of our root, it will inherit a default font size of `10px`. This makes our conversion to relative units much easier. All of a sudden, `1em` is the same as `10px`, `240%` is the same as `24px`, and `1.4rem` is the same as `14px`.

You may change this variable if you wish. However, there will be changes to every style defined in `skeleton/themes/[theme]/_base.scss` (replacing `[theme]` with the name of the active theme) that uses the `relative` function (used 47 times).