Skip to content

Latest commit

 

History

History
124 lines (87 loc) · 2.97 KB

variables.md

File metadata and controls

124 lines (87 loc) · 2.97 KB
Raw

Sass Variables

Each Foundation framework has several hundred settings variables, so it's important that they're named consistently.

Building a Settings File

We use our custom Octophant library to generate the settings file.

New settings files are only generated once per patch, right before a release is tagged.

For Octophant to work, variables must be annotated with SassDoc—this is explained in "Documentation" below.

Hierarchy

Only use the hyphen to denote hierarchy, not to separate words. Use this format:

$component-subcomponent-property-state

Component names

Condense the name of the component into one word.

// Button
$button-background: #000;

// Title bar
$titlebar-background: #000;

Property names

For common CSS properties, use these terms:

Variable name CSS property
font-size font-size
font-weight font-weight
color color
background background, background-color
border border
shadow box-shadow
radius border-radius
padding padding
margin margin
width width
height height

Property use

Avoid creating variables for individual facets of one property; use the shorthand versions instead. For example, create one variable for border instead of three.

// Good
$input-border: 1px solid #ccc;

// Bad
$input-border-width: 1px;
$input-border-style: solid;
$input-border-color: #ccc;

State

States should always come last in the variable name. The most common states are hover, active, and focus.

$button-background-hover: #666;
$button-background-active: #333;

Documentation

All variables should be documented with a description and type. Follow the SassDoc standards to describe variables.

/// Default background color for buttons.
/// @type Color
/// @since 6.1.0 Added.
$button-background: $primary-color;

Description

To keep variable descriptions consistent, word it as if you're finishing the sentence "This variable sets the...".

/// Padding for buttons.
$button-padding: 1rem;

/// Background of the page.
$body-background: #fff;

@type

The type is the... type of value a variable allows.

/// Default background color for buttons.
/// @type Color
$button-background: #000;

If a variable can accept multiple types, separate them by a pipe. This is common for margin and padding variables, which can be a single value (a Number) or multiple values (a List).

/// Default padding for buttons.
/// @type Number | List
$button-padding: 1rem;

@since

If a variable is added after a major patch, note the version number it was added in. This helps users on older versions know if they can or can't use a variable.

/// Default box shadow for buttons on hover.
/// @type List
/// @since 6.1.0 Added.
$button-shadow-hover: 0 2px 10px rgba(#000, 0.15);