https://github.com/grabr/quantum-css
Atomic CSS library written in SCSS.
https://github.com/grabr/quantum-css
atomic atomic-css css scss
Last synced: about 1 year ago
JSON representation
Atomic CSS library written in SCSS.
- Host: GitHub
- URL: https://github.com/grabr/quantum-css
- Owner: grabr
- License: mit
- Archived: true
- Created: 2016-10-22T18:05:10.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-01-24T15:48:26.000Z (about 7 years ago)
- Last Synced: 2025-03-09T13:48:08.418Z (about 1 year ago)
- Topics: atomic, atomic-css, css, scss
- Language: CSS
- Homepage:
- Size: 1.95 MB
- Stars: 28
- Watchers: 11
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Quantum CSS
[](https://www.npmjs.com/package/quantum-css)
[](https://travis-ci.org/Grabr/quantum-css)
> “Everything should be made as simple as possible, but no simpler.” – Albert Einstein [1](http://quoteinvestigator.com/2011/05/13/einstein-simple/)
## Preface
Quantum CSS is an atomic CSS library written in SCSS.
You won’t need to write any CSS rules and media queries while using Quantum CSS. Creating highly responsive UIs becomes pleasure while extension pattern provides means of controlled customization. You can create molecules with avaialble atoms using [`@extend`][1].
Here is a sample button component with rounded corners, hover and focus transition animations (which are disabled on small screens to provide better experience on touch devices):
```html
```
```sass
.btn {
@extend .px15, .h40; // Size
@extend .bds-s, .bdw1, .bdr5; // Border style solid, border width 1px and rounded corners
@extend .trp-c, .trd200ms; // Color transitions
&-fb { @extend .bgc-fb, .c-w, .bdc-tt, .SM_bgc-dfb-hf } // Facebook
&-tw { @extend .bgc-tw, .c-w, .bdc-tt, .SM_bgc-dtw-hf } // Twitter
}
```
Benefits of using [`@extend`][1] approach:
- Highly standardized styles. Limited amount of building blocks allows you to have more order in your design.
- Stylesheet compilation time errors. Build fails if unknown atoms are used.
- Easy to remember class names. Atoms naming convention was heavily inspired by [Emmet](http://docs.emmet.io/cheat-sheet/), and most of the time abbreviations are first letters of words that property or value names consist of.
## Contents
1. [**Naming Conventions**](#naming-conventions)
- [Value Aliases](#value-aliases)
- [Color Values](#color-values)
- [Unit-less Properties](#unit-less-properties)
1. [**Breakpoints**](#breakpoints)
1. [**Pseudo-classes and Pseudo-elements**](#pseudos)
1. [**Grid System**](#grid-system)
- [Containers](#grid-containers)
- [Rows](#grid-rows)
- [Columns](#grid-columns)
- [Column Ordering](#column-ordering)
1. [**Atom Index**](#atom-index)
- [**Name Pattern**](#name-pattern)
- [**Background**](#background)
[`background-color`](#background-color)
[`background-attachment`](#background-attachment)
[`background-clip`](#background-clip)
[`background-image`](#background-image)
[`background-origin`](#background-origin)
[`background-repeat`](#background-repeat)
[`background-size`](#background-size)
[`background-position`](#background-position)
[`background-position-x`](#background-position-x)
[`background-position-y`](#background-position-y)
[`fill`](#fill)
- [**Border**](#border)
[`border-color`](#border-color)
[`border-top-color`](#border-color)
[`border-right-color`](#border-color)
[`border-bottom-color`](#border-color)
[`border-left-color`](#border-color)
[`border-width`](#border-width)
[`border-top-width`](#border-width)
[`border-right-width`](#border-width)
[`border-bottom-width`](#border-width)
[`border-left-width`](#border-width)
[`border-style`](#border-style)
[`border-top-style`](#border-style)
[`border-right-style`](#border-style)
[`border-bottom-style`](#border-style)
[`border-left-style`](#border-style)
[`border-radius`](#border-radius)
[`border-top-right-radius`](#border-radius)
[`border-top-left-radius`](#border-radius)
[`border-bottom-right-radius`](#border-radius)
[`border-bottom-left-radius`](#border-radius)
- [**Images**](#images)
[`object-fit`](#object-fit)
- [**Transforms**](#transforms)
[`transform`](#transform)
- [**Flexible Box Layout**](#flexible-box-layout)
[`flex-direction`](#flex-direction)
[`flex-wrap`](#flex-wrap)
[`flex-grow`](#flex-grow)
[`flex-shrink`](#flex-shrink)
[`flex-basis`](#flex-basis)
[`justify-content`](#justify-content)
[`align-items`](#align-items)
[`align-content`](#align-content)
[`align-self`](#align-self)
[`order`](#order)
- [**Positioning**](#positioning)
[`float`](#float)
[`clear`](#clear)
[`position`](#position)
[`top`](#top-right-bottom-left)
[`right`](#top-right-bottom-left)
[`bottom`](#top-right-bottom-left)
[`left`](#top-right-bottom-left)
[`z-index`](#z-index)
- [**Fonts**](#fonts)
[`font-size`](#font-size)
[`line-height`](#line-height)
[`font-family`](#font-family)
[`font-weight`](#font-weight)
[`font-style`](#font-style)
[`font-variant`](#font-variant)
[`font-size-adjust`](#font-size-adjust)
[`font-stretch`](#font-stretch)
[`-webkit-font-smoothing`](#-webkit-font-smoothing)
[`-moz-osx-font-smoothing`](#-moz-osx-font-smoothing)
- [**Transitions**](#transitions)
[`transition-property`](#transition-property)
[`transition-duration`](#transition-duration)
[`transition-timing-function`](#transition-timing-function)
- [**Text**](#text)
[`letter-spacing`](#letter-spacing)
[`overflow-wrap`](#overflow-wrap)
[`text-align`](#text-align)
[`text-align-last`](#text-align-last)
[`text-indent`](#text-indent)
[`text-decoration`](#text-decoration)
[`text-transform`](#text-transform)
[`white-space`](#white-space)
[`word-break`](#word-break)
[`word-wrap`](#word-wrap)
- [**Lists and Counters**](#lists-and-counters)
[`list-style`](#list-style)
[`list-style-position`](#list-style-position)
[`list-style-type`](#list-style-type)
- [**Colors**](#colors)
[`color`](#color)
[`opacity`](#opacity)
- [**Box Model**](#box-model)
[`box-sizing`](#box-sizing)
[`height`](#height)
[`width`](#width)
[`margin`](#margin)
[`padding`](#padding)
[`overflow`](#overflow)
[`overflow-x`](#overflow-x)
[`overflow-y`](#overflow-y)
[`-webkit-overflow-scrolling`](#-webkit-overflow-scrolling)
[`visibility`](#visibility)
- [**Page**](#page)
[`page-break-before`](#page-break-before)
[`page-break-inside`](#page-break-inside)
[`page-break-after`](#page-break-after)
- [**User Interface**](#user-interface)
[`cursor`](#cursor)
[`resize`](#resize)
[`text-overflow`](#text-overflow)
[`user-select`](#user-select)
- [**Table**](#table)
[`border-collapse`](#border-collapse)
[`caption-side`](#caption-side)
[`empty-cells`](#empty-cells)
[`table-layout`](#table-layout)
[`vertical-align`](#vertical-align)
- [**Miscellaneous**](#miscellaneous)
[`display`](#display)
1. [**License**](#license)
## Naming Conventions
In Quantum CSS every class name consists of four parts in given order:
1. Optional [breakpoint](#breakpoints) name: `SM`, `MD` etc.
1. Property abbreviation: bdtc, ws etc.
1. Value abbreviation: `w`, `100p`, `360d` etc.
1. Optional pseudo-class or pseudo-element modifier: `hf`, `h` etc.
You can configure separators between each parts of class name with following variables:
- `$breakpoint-sep` define separator between breakpoint name and property abbreviation.
- `$literal-sep` and `$ordinal-sep` define separators that are inserted between property name and literal value abbreviation or ordinal one respectively.
- `$pseudo-sep` defines separator between pseudo modifier from value abbreviation.
### Value Aliases
Aliases for commonly used values:
- `p` → `%`
- `e` → `em`
- `x` → `ex`
- `r` → `rem`
- `d` → `deg`
- `t` → `turn`
These aliases are used instead of full units:
- w100p → `width: 100%`
- SM_mah42 → `@media (min-width: 576px) { max-height: 42px }`
### Color Values
Names for colors are used fo increase readability. By default, [Tango palette](http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines#Color_Palette) is used for every color-related atom. You can specify your own palette overriding variables in [`_variables.scss`](scss/_variables.scss).
Greyscale | Value
---------------- | ---------
1. White `w` | `#fff`
2. Grey 15% `g1` | `#eeeeec`
3. Grey 30% `g2` | `#d3d7cf`
4. Grey 45% `g3` | `#babdb6`
5. Grey 60% `g4` | `#888a85`
6. Grey 75% `g5` | `#555753`
7. Grey 90% `g6` | `#2e3436`
8. Black `b` | `#000`
Color | Light `l` | Medium | Dark `d`
----------------- | --------- | --------- | ---------
9. Yellow `y` | `#fce94f` | `#edd400` | `#c4a000`
10. Orange `o` | `#fcaf3e` | `#f57900` | `#ce5c00`
11. Chocolate `c` | `#e9b96e` | `#c17d11` | `#8f5902`
12. Green `g` | `#8ae234` | `#73d216` | `#4e9a06`
13. Navy `n` | `#729fcf` | `#3465a4` | `#204a87`
14. Purple `p` | `#ad7f8a` | `#75507b` | `#5c3566`
15. Red `r` | `#ef2929` | `#cc0000` | `#a40000`
CSS-literal colors:
- `cc` → [`currentColor`](https://developer.mozilla.org/en/docs/Web/CSS/color_value#currentColor_keyword)
- `t` → `transparent`
- `i` → `inherit`
Generated atom examples:
- SM_bgc-dg → `background-color: #4e9a06` Dark green
- bdrc-w → `border-right-color: white`
- LG_c-b → `color: black`
### Unit-less Properties
Some CSS properties are defined as unit-less, e.g. no unit suffix will be outputted:
- lh1 → `line-height: 1`
- fw400 → `font-weight: 400`
- op37 → `opacity: 0.37`
## Breakpoints
One of the most powerful features of Quantum is breakpoint-based media queries.
## Pseudo-classes and Pseudo-elements
You can configure set of pseudo-classes and pseudo-elements for which atoms are generated via `$pseudos`. To emit disjunction of pseudos use comma-separated list.
```sass
$pseudos: (hf: (hover, focus));
.c-w-hf:hover,
.c-w-hf:focus {
color: white;
}
```
Space-separated list defines selector conjunction:
```sass
$pseudos: (eh: empty hover);
.c-w-eh:empty:hover {
color: white;
}
```
Combine those different list types for precise class targeting:
```sass
$pseudos: (foo: (active hover, active focus));
.c-w-foo:active:hover,
.c-w-foo:active:focus {
color: white;
}
```
## Grid System
As well as in [Bootstrap](http://v4-alpha.getbootstrap.com/layout/overview/#containers) Containers are the most basic layout element and are required when using grid system. Use g-f to create a fixed-width centered responsive layout of columns.
While containers _can_ be nested, most layouts do not require a nested container.
```html
```
Widths of fixed-width container are stored in `$grid-widths`.
Rows are horizontal groups of columns that ensure your columns are lined up properly.
```html
```
Content should be placed within columns, and only columns may be immediate children of rows.
Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So if you want three equal-width columns, you’d use SM_gc4. You can change number of columns in grid altering [`$grid-col-count`](scss/_variables.scss).
Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Columns have horizontal padding to create the gutters between individual columns. Gutters can be configured per every breakpoint via [`$grid-gutters`](scss/_variables.scss).
```html
```
### Column Ordering
In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls.
Move columns to the right using [breakpoint\_]go(0…12/1) classes. These classes increase the left margin of a column by specified number of columns. For example, `MD_go4` moved `MD_gc4` over four columns.
Change the order of columns by relatively shifting them to the left with [breakpoint\_]gsl(0…12/1) or to the right with [breakpoint\_]gsr(0…12/1) classes.
```html
```
## Atom Index
Values for each atom are listed in the order they are listed in generated CSS.
### Name Pattern
- `(1…10/2)` Range of possible values from `1` to `10` with step `2`.
- `[breakpoint_]` and `[-pseudo]` Optional [breakpoint](#breakpoints) and [pseudo-element or pseudo-class](#pseudos).
- `{key}` and `{value}` Placeholders for map key and map value.
Example `[breakpoint_]fw(100…900/100)` expands to `fw100`, `fw200` … `SM_fw100`, `SM_fw200` … `LG_fw900`.
### Background
#### [`background-color`](https://developer.mozilla.org/en/docs/Web/CSS/background-color)
[breakpoint\_]bgc{key}[-pseudo] → `background-color: {value}`
Specify mapping in $background-colors: (key: value).
#### [`background-attachment`](https://developer.mozilla.org/en/docs/Web/CSS/background-attachment)
1. bga-f → `fixed`
1. bga-s → `scroll`
#### [`background-clip`](https://developer.mozilla.org/en/docs/Web/CSS/background-clip)
1. bgcp-bb → `border-box`
1. bgcp-pb → `padding-box`
1. bgcp-cb → `content-box`
1. bgcp-i → `inherit`
#### [`background-image`](https://developer.mozilla.org/en/docs/Web/CSS/background-image)
1. bgi-n → `none`
1. bgi-i → `inherit`
#### [`background-origin`](https://developer.mozilla.org/en/docs/Web/CSS/background-origin)
1. bgo-bb → `border-box`
1. bgo-pb → `padding-box`
1. bgo-cb → `content-box`
#### [`background-repeat`](https://developer.mozilla.org/en/docs/Web/CSS/background-repeat)
1. bgr-n → `no-repeat`
1. bgr-x → `repeat-x`
1. bgr-y → `repeat-y`
1. bgr-s → `space`
1. bgr-r → `round`
#### [`background-size`](https://developer.mozilla.org/en/docs/Web/CSS/background-size)
1. bgz-a → `auto`
1. bgz-ct → `contain`
1. bgz-cv → `cover`
#### [`background-position`](https://developer.mozilla.org/en/docs/Web/CSS/background-position)
1. bgp-tc → `top center`
1. bgp-tl → `top left`
1. bgp-cr → `center right`
1. bgp-cc → `center center`
1. bgp-cl → `center left`
1. bgp-br → `bottom right`
1. bgp-bc → `bottom center`
1. bgp-bl → `bottom left`
#### [`background-position-x`](https://developer.mozilla.org/en/docs/Web/CSS/background-position-x)
1. bgpx-r → `right`
1. bgpx-c → `center`
1. bgpx-l → `left`
#### [`background-position-y`](https://developer.mozilla.org/en/docs/Web/CSS/background-position-y)
1. bgpy-t → `top`
1. bgpy-c → `center`
1. bgpy-b → `bottom`
#### [`fill`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)
[breakpoint\_]fi{key}[-pseudo] → `fill: {value}`
Specify mapping in $background-colors: (key: value).
### Border
#### [`border-color`](https://developer.mozilla.org/en/docs/Web/CSS/border-color)
1. [breakpoint\_]bdc{key}[-pseudo] → `border-color: {value}`
1. [breakpoint\_]bdxc{key}[-pseudo] = bdlc{key}, bdrc{key}
1. [breakpoint\_]bdyc{key}[-pseudo] = bdtc{key}, bdbc{key}
1. [breakpoint\_]bdtc{key}[-pseudo] → `border-top-color: {value}`
1. [breakpoint\_]bdbc{key}[-pseudo] → `border-bottom-color: {value}`
1. [breakpoint\_]bdrc{key}[-pseudo] → `border-right-color: {value}`
1. [breakpoint\_]bdlc{key}[-pseudo] → `border-left-color: {value}`
Specify mapping in $border-colors: (key: value).
#### [`border-width`](https://developer.mozilla.org/en/docs/Web/CSS/border-width)
1. [breakpoint\_]bdw{key} → `border-width: {value}`
1. [breakpoint\_]bdxw{key} = bdlw{key}, bdrw{key}
1. [breakpoint\_]bdyw{key} = bdtw{key}, bdbw{key}
1. [breakpoint\_]bdtw{key} → `border-top-width: {value}`
1. [breakpoint\_]bdbw{key} → `border-bottom-width: {value}`
1. [breakpoint\_]bdrw{key} → `border-right-width: {value}`
1. [breakpoint\_]bdlw{key} → `border-left-width: {value}`
Specify mapping in $border-widths: (key: value).
#### [`border-style`](https://developer.mozilla.org/en/docs/Web/CSS/border-style)
1. [breakpoint\_]bds{key} → `border-style: {value}`
1. [breakpoint\_]bdxs{key} = bdls{key}, bdrs{key}
1. [breakpoint\_]bdys{key} = bdts{key}, bdbs{key}
1. [breakpoint\_]bdts{key} → `border-top-style: {value}`
1. [breakpoint\_]bdbs{key} → `border-bottom-style: {value}`
1. [breakpoint\_]bdrs{key} → `border-right-style: {value}`
1. [breakpoint\_]bdls{key} → `border-left-style: {value}`
Specify mapping in $border-styles: (key: value).
By default, all available border styles are included. Border style atoms are emitted for every breakpoint what can
cause significant increase of outputted CSS file. Be sure to remove unused border styles in order to reduce file size.
#### [`border-radius`](https://developer.mozilla.org/en/docs/Web/CSS/border-radius)
1. [breakpoint\_]bdr{key} → `border-radius: {value}`
1. [breakpoint\_]bdtr{key} = bdtlr{key}, bdtrr{key}
1. [breakpoint\_]bdrr{key} = bdtrr{key}, bdbrr{key}
1. [breakpoint\_]bdbr{key} = bdblr{key}, bdbrr{key}
1. [breakpoint\_]bdlr{key} = bdtlr{key}, bdblr{key}
1. [breakpoint\_]bdtrr{key} → `border-top-right-radius: {value}`
1. [breakpoint\_]bdtlr{key} → `border-top-left-radius: {value}`
1. [breakpoint\_]bdbrr{key} → `border-bottom-right-radius: {value}`
1. [breakpoint\_]bdblr{key} → `border-bottom-left-radius: {value}`
Specify mapping in $border-radiuses: (key: value).
### Images
#### [`object-fit`](https://developer.mozilla.org/en/docs/Web/CSS/object-fit)
1. of-n → `none`
1. of-f → `fill`
1. of-ct → `contain`
1. of-cv → `cover`
1. of-sd → `scale-down`
1. of-i → `inherit`
### Transforms
#### [`transform`](https://developer.mozilla.org/en/docs/Web/CSS/transform)
1. ts-n → `none`
1. ts-i → `inherit`
1. tsr(45d…360/45d) → `transform: rotate(45deg)`…`rotate(360deg)`
1. tsr(-45d…-360/-45d) → `transform: rotate(-45deg)`…`rotate(-360deg)`
1. tss(0…200/25) → `transform: scale(0)`…`scale(2)`
### Flexible Box Layout
These shortcuts are available if [display](#display) atom is included.
1. [breakpoint\_]fx-r = d-fx, fxd-r
1. [breakpoint\_]fx-rr = d-fx, fxd-rr
1. [breakpoint\_]fx-c = d-fx, fxd-c
1. [breakpoint\_]fx-cr = d-fx, fxd-cr
#### [`flex-direction`](https://developer.mozilla.org/en/docs/Web/CSS/flex-direction)
1. [breakpoint\_]fxd-r → `row`
1. [breakpoint\_]fxd-rr → `row-reverse`
1. [breakpoint\_]fxd-c → `column`
1. [breakpoint\_]fxd-cr → `column-reverse`
#### [`flex-wrap`](https://developer.mozilla.org/en/docs/Web/CSS/flex-wrap)
1. [breakpoint\_]fxw-n → `nowrap`
1. [breakpoint\_]fxw-w → `wrap`
1. [breakpoint\_]fxw-wr → `wrap-reverse`
#### [`flex-grow`](https://developer.mozilla.org/en/docs/Web/CSS/flex-grow)
[breakpoint\_]fxg(0…10/1) → `flex-grow: 0`…`10`
#### [`flex-shrink`](https://developer.mozilla.org/en/docs/Web/CSS/flex-shrink)
[breakpoint\_]fxs(0…10/1) → `flex-shrink: 0`…`10`
#### [`flex-basis`](https://developer.mozilla.org/en/docs/Web/CSS/flex-basis)
1. [breakpoint\_]fxb-a → `auto`
1. [breakpoint\_]fxb-mac → `max-content`
1. [breakpoint\_]fxb-mic → `min-content`
1. [breakpoint\_]fxb-fc → `fit-content`
1. [breakpoint\_]fxb-c → `content`
#### [`justify-content`](https://developer.mozilla.org/en/docs/Web/CSS/justify-content)
1. [breakpoint\_]jc-fs → `flex-start`
1. [breakpoint\_]jc-fe → `flex-end`
1. [breakpoint\_]jc-c → `center`
1. [breakpoint\_]jc-sb → `space-between`
1. [breakpoint\_]jc-sa → `space-around`
#### [`align-items`](https://developer.mozilla.org/en/docs/Web/CSS/align-items)
1. [breakpoint\_]ai-fs → `flex-start`
1. [breakpoint\_]ai-fe → `flex-end`
1. [breakpoint\_]ai-c → `center`
1. [breakpoint\_]ai-bs → `baseline`
1. [breakpoint\_]ai-s → `stretch`
#### [`align-content`](https://developer.mozilla.org/en/docs/Web/CSS/align-content)
1. [breakpoint\_]ac-fs → `flex-start`
1. [breakpoint\_]ac-fe → `flex-end`
1. [breakpoint\_]ac-c → `center`
1. [breakpoint\_]ac-sb → `space-between`
1. [breakpoint\_]ac-sa → `space-around`
1. [breakpoint\_]ac-s → `stretch`
#### [`align-self`](https://developer.mozilla.org/en/docs/Web/CSS/align-self)
1. [breakpoint\_]as-a → `auto`
1. [breakpoint\_]as-fs → `flex-start`
1. [breakpoint\_]as-fe → `flex-end`
1. [breakpoint\_]as-c → `center`
1. [breakpoint\_]as-b → `baseline`
1. [breakpoint\_]as-s → `stretch`
#### [`order`](https://developer.mozilla.org/en/docs/Web/CSS/order)
[breakpoint\_]ord(0…10/1) → `order: 0`…`10`
### Positioning
#### [`float`](https://developer.mozilla.org/en/docs/Web/CSS/float)
1. [breakpoint\_]fl-l → `left`
1. [breakpoint\_]fl-r → `right`
1. [breakpoint\_]fl-n → `none`
#### [`clear`](https://developer.mozilla.org/en/docs/Web/CSS/clear)
1. cl-l → `left`
1. cl-r → `right`
1. cl-b → `both`
1. cl-n → `none`
#### [`position`](https://developer.mozilla.org/en/docs/Web/CSS/position)
1. pos-s → `static`
1. pos-a → `absolute`
1. pos-r → `relative`
1. pos-f → `fixed`
#### [`top`](https://developer.mozilla.org/en/docs/Web/CSS/top) [`right`](https://developer.mozilla.org/en/docs/Web/CSS/right) [`bottom`](https://developer.mozilla.org/en/docs/Web/CSS/bottom) [`left`](https://developer.mozilla.org/en/docs/Web/CSS/left)
1. [breakpoint\_]t{key} → `top: {value}`
1. [breakpoint\_]r{key} → `right: {value}`
1. [breakpoint\_]b{key} → `bottom: {value}`
1. [breakpoint\_]l{key} → `left: {value}`
Specify mapping in $positions: (key: value).
#### [`z-index`](https://developer.mozilla.org/en/docs/Web/CSS/z-index)
1. z(0…10/1) → `z-index: 0`…`10`
1. z-a → `auto`
1. z-i → `inherit`
### Fonts
#### [`font-size`](https://developer.mozilla.org/en/docs/Web/CSS/font-size)
1. [breakpoint\_]fz-xxs → `xx-small`
1. [breakpoint\_]fz-xs → `x-small`
1. [breakpoint\_]fz-s → `small`
1. [breakpoint\_]fz-m → `medium`
1. [breakpoint\_]fz-l → `large`
1. [breakpoint\_]fz-xl → `x-large`
1. [breakpoint\_]fz-xxl → `xx-large`
1. [breakpoint\_]fz-lr → `larger`
1. [breakpoint\_]fz-sr → `smaller`
1. [breakpoint\_]fz-i → `inherit`
1. [breakpoint\_]fz{key} → `font-size: {value}`
Specify mapping in $font-sizes: (key: value).
#### [`line-height`](https://developer.mozilla.org/en/docs/Web/CSS/line-height)
1. lh-n → `normal`
1. lh-i → `inherit`
1. lh0 → `0`
1. lh1 → `1`
1. lh{key} → `line-height: {value}`
Specify mapping in $line-heights: (key: value).
#### [`font-family`](https://developer.mozilla.org/en/docs/Web/CSS/font-family)
1. [breakpoint\_]fs-s → `serif`
1. [breakpoint\_]fs-ss → `sans-serif`
1. [breakpoint\_]fs-m → `monospace`
1. [breakpoint\_]fs-c → `cursive`
1. [breakpoint\_]fs-f → `fantasy`
1. [breakpoint\_]fs-i → `inherit`
1. [breakpoint\_]fs{key} → `font-family: {value}`
Specify mapping in $font-families: (key: value).
#### [`font-weight`](https://developer.mozilla.org/en/docs/Web/CSS/font-weight)
1. [breakpoint\_]fw(100…900/100) → `font-weight: 100`…`900`
1. [breakpoint\_]fw-n → `normal`
1. [breakpoint\_]fw-b → `bold`
1. [breakpoint\_]fw-br → `bolder`
1. [breakpoint\_]fw-lr → `lighter`
1. [breakpoint\_]fw-i → `inherit`
#### [`font-style`](https://developer.mozilla.org/en/docs/Web/CSS/font-style)
1. [breakpoint\_]fs-n → `normal`
1. [breakpoint\_]fs-i → `italic`
1. [breakpoint\_]fs-o → `oblique`
#### [`font-variant`](https://developer.mozilla.org/en/docs/Web/CSS/font-variant)
1. fv-cl → `common-ligatures`
1. fv-apc → `all-petite-caps`
1. fv-asc → `all-small-caps`
1. fv-sc → `small-caps`
1. fv-c → `contextual`
1. fv-df → `diagonal-fractions`
1. fv-sf → `stacked-fractions`
1. fv-hf → `historical-forms`
1. fv-hl → `historical-ligatures`
1. fv-i → `inherit`
1. fv-n → `normal`
1. fv-tn → `tabular-nums`
1. fv-pn → `proportional-nums`
1. fv-pw → `proportional-width`
#### [`font-size-adjust`](https://developer.mozilla.org/en/docs/Web/CSS/font-size-adjust)
fza-n → `none`
#### [`font-stretch`](https://developer.mozilla.org/en/docs/Web/CSS/font-stretch)
1. fst-n → `normal`
1. fst-uc → `ultra-condensed`
1. fst-ec → `extra-condensed`
1. fst-c → `condensed`
1. fst-sc → `semi-condensed`
1. fst-se → `semi-expanded`
1. fst-e → `expanded`
1. fst-ee → `extra-expanded`
1. fst-ue → `ultra-expanded`
#### [`-webkit-font-smoothing`](https://developer.mozilla.org/en/docs/Web/CSS/-webkit-font-smoothing)
1. wfsm-a → `antialiased`
1. wfsm-sa → `subpixel-antialiased`
1. wfsm-n → `none`
#### [`-moz-osx-font-smoothing`](https://developer.mozilla.org/en/docs/Web/CSS/-moz-osx-font-smoothing)
1. mfsm-a → `auto`
1. mfsm-g → `grayscale`
### Transitions
#### [`transition-property`](https://developer.mozilla.org/en/docs/Web/CSS/transition-property)
1. trp-n → `none`
1. trp-a → `all`
#### [`transition-duration`](https://developer.mozilla.org/en/docs/Web/CSS/transition-duration)
trd(100ms…1000ms/100ms) → `transition-duration: 100ms`…`1000ms`
#### [`transition-timing-function`](https://developer.mozilla.org/en/docs/Web/CSS/transition-timing-function)
1. trtf-e → `ease`
1. trtf-ei → `ease-in`
1. trtf-eo → `ease-out`
1. trtf-eio → `ease-in-out`
1. trtf-l → `linear`
1. trtf-ss → `step-start`
1. trtf-se → `step-end`
### Text
#### [`letter-spacing`](https://developer.mozilla.org/en/docs/Web/CSS/letter-spacing)
1. ls-n → `normal`
1. ls-i → `inherit`
1. ls{key} → `letter-spacing: {value}`
Specify mapping in $letter-spacings: (key: value).
#### [`overflow-wrap`](https://developer.mozilla.org/en/docs/Web/CSS/overflow-wrap)
1. ovw-n → `normal`
1. ovw-b → `break-word`
#### [`text-align`](https://developer.mozilla.org/en/docs/Web/CSS/text-align)
1. [breakpoint\_]ta-l → `left`
1. [breakpoint\_]ta-c → `center`
1. [breakpoint\_]ta-r → `right`
1. [breakpoint\_]ta-j → `justify`
#### [`text-align-last`](https://developer.mozilla.org/en/docs/Web/CSS/text-align-last)
1. [breakpoint\_]tal-l → `left`
1. [breakpoint\_]tal-c → `center`
1. [breakpoint\_]tal-r → `right`
1. [breakpoint\_]tal-j → `justify`
#### [`text-indent`](https://developer.mozilla.org/en/docs/Web/CSS/text-indent)
ti{key} → `text-indent: {value}`
Specify mapping in $text-indents: (key: value).
#### [`text-decoration`](https://developer.mozilla.org/en/docs/Web/CSS/text-decoration)
1. [breakpoint\_]td-n[-pseudo] → `none`
1. [breakpoint\_]td-u[-pseudo] → `underline`
1. [breakpoint\_]td-o → `overline`
1. [breakpoint\_]td-lt → `line-through`
#### [`text-transform`](https://developer.mozilla.org/en/docs/Web/CSS/text-transform)
1. tt-c → `capitalize`
1. tt-u → `uppercase`
1. tt-l → `lowercase`
1. tt-n → `none`
1. tt-fw → `full-width`
#### [`white-space`](https://developer.mozilla.org/en/docs/Web/CSS/white-space)
1. [breakpoint\_]ws-n → `normal`
1. [breakpoint\_]ws-p → `pre`
1. [breakpoint\_]ws-nw → `nowrap`
1. [breakpoint\_]ws-pw → `pre-wrap`
1. [breakpoint\_]ws-pl → `pre-line`
#### [`word-break`](https://developer.mozilla.org/en/docs/Web/CSS/word-break)
1. wob-n → `normal`
1. wob-ka → `keep-all`
1. wob-ba → `break-all`
#### [`word-wrap`](https://developer.mozilla.org/en/docs/Web/CSS/word-wrap)
1. wow-n → `normal`
1. wow-bw → `break-word`
### Lists and Counters
#### [`list-style`](https://developer.mozilla.org/en/docs/Web/CSS/list-style)
1. lis-n → `none`
1. lis-i → `inherit`
#### [`list-style-position`](https://developer.mozilla.org/en/docs/Web/CSS/list-style-position)
1. lisp-in → `inside`
1. lisp-o → `outside`
1. lisp-i → `inherit`
#### [`list-style-type`](https://developer.mozilla.org/en/docs/Web/CSS/list-style-type)
1. list-n → `none`
1. list-d → `disc`
1. list-c → `circle`
1. list-s → `square`
1. list-dc → `decimal`
1. list-dclz → `decimal-leading-zero`
1. list-lr → `lower-roman`
1. list-ur → `upper-roman`
1. list-i → `inherit`
### Colors
#### [`color`](https://developer.mozilla.org/en/docs/Web/CSS/color)
[breakpoint\_]c{key}[-pseudo] → `color: {value}`
Specify mapping in $colors: (key: value).
#### [`opacity`](https://developer.mozilla.org/en/docs/Web/CSS/opacity)
op(0…100/1) → `opacity: 0`…`1`
### Box Model
#### [`box-shadow`](https://developer.mozilla.org/en/docs/Web/CSS/box-shadow)
bxs{key}[-pseudo] → `box-shadow: {value}`
Specify mapping in $box-shadows: (key: value).
#### [`box-sizing`](https://developer.mozilla.org/en/docs/Web/CSS/box-sizing)
1. bxz-cb → `content-box`
1. bxz-bb → `border-box`
1. bxz-i → `inherit`
#### [`height`](https://developer.mozilla.org/en/docs/Web/CSS/height)
1. [breakpoint\_]h{key} → `height: {value}`
1. [breakpoint\_]mah-n → `max-height: none`
1. [breakpoint\_]mah{key} → `max-height: {value}`
1. [breakpoint\_]mih{key} → `min-height: {value}`
Specify mapping in $heights: (key: value).
#### [`width`](https://developer.mozilla.org/en/docs/Web/CSS/width)
1. [breakpoint\_]w{key} → `width: {value}`
1. [breakpoint\_]maw-n → `max-width: none`
1. [breakpoint\_]maw{key} → `max-width: {value}`
1. [breakpoint\_]miw{key} → `min-width: {value}`
Specify mapping in $widths: (key: value).
#### [`margin`](https://developer.mozilla.org/en/docs/Web/CSS/margin)
1. [breakpoint\_]m{key} → `margin: {value}`
1. [breakpoint\_]mx-a → `margin-left: auto`, `margin-right: auto`
1. [breakpoint\_]mx{key} = ml{key}, mr{key}
1. [breakpoint\_]my{key} = mt{key}, mb{key}
1. [breakpoint\_]mt{key} → `margin-top: {value}`
1. [breakpoint\_]mr{key} → `margin-right: {value}`
1. [breakpoint\_]mb{key} → `margin-bottom: {value}`
1. [breakpoint\_]ml{key} → `margin-left: {value}`
Specify mapping in $margins: (key: value).
#### [`padding`](https://developer.mozilla.org/en/docs/Web/CSS/padding)
1. [breakpoint\_]p{key} → `padding: {value}`
1. [breakpoint\_]px{key} = pl{key}, pr{key}
1. [breakpoint\_]py{key} = pt{key}, pb{key}
1. [breakpoint\_]pt{key} → `padding-top: {value}`
1. [breakpoint\_]pr{key} → `padding-right: {value}`
1. [breakpoint\_]pb100p → `padding-bottom: 100%`
1. [breakpoint\_]pb{key} → `padding-bottom: {value}`
1. [breakpoint\_]pl{key} → `padding-left: {value}`
Specify mapping in $paddings: (key: value).
#### [`overflow`](https://developer.mozilla.org/en/docs/Web/CSS/overflow)
1. ov-v → `visible`
1. ov-h → `hidden`
1. ov-s → `scroll`
1. ov-a → `auto`
#### [`overflow-x`](https://developer.mozilla.org/en/docs/Web/CSS/overflow-x)
1. ovx-v → `visible`
1. ovx-h → `hidden`
1. ovx-s → `scroll`
1. ovx-a → `auto`
#### [`overflow-y`](https://developer.mozilla.org/en/docs/Web/CSS/overflow-y)
1. ovy-v → `visible`
1. ovy-h → `hidden`
1. ovy-s → `scroll`
1. ovy-a → `auto`
#### [`-webkit-overflow-scrolling`](https://developer.mozilla.org/en/docs/Web/CSS/-webkit-overflow-scrolling)
1. wovs-t → `touch`
1. wovs-a → `auto`
#### [`visibility`](https://developer.mozilla.org/en/docs/Web/CSS/visibility)
1. [breakpoint\_]v-v → `visible`
1. [breakpoint\_]v-h → `hidden`
1. [breakpoint\_]v-c → `collapse`
### Page
#### [`page-break-before`](https://developer.mozilla.org/en/docs/Web/CSS/page-break-before)
1. pgbb-a → `auto`
1. pgbb-al → `always`
1. pgbb-av → `avoid`
1. pgbb-l → `left`
1. pgbb-r → `right`
#### [`page-break-inside`](https://developer.mozilla.org/en/docs/Web/CSS/page-break-inside)
1. pgbi-a → `auto`
1. pgbi-av → `avoid`
#### [`page-break-after`](https://developer.mozilla.org/en/docs/Web/CSS/page-break-after)
1. pgba-a → `auto`
1. pgba-al → `always`
1. pgba-av → `avoid`
1. pgba-l → `left`
1. pgba-r → `right`
### User Interface
#### [`cursor`](https://developer.mozilla.org/en/docs/Web/CSS/cursor)
1. cur-a → `auto`
1. cur-d → `default`
1. cur-cm → `context-menu`
1. cur-h → `help`
1. cur-p → `pointer`
1. cur-ps → `progress`
1. cur-w → `wait`
1. cur-cl → `cell`
1. cur-c → `crosshair`
1. cur-t → `text`
1. cur-al → `alias`
1. cur-cp → `copy`
1. cur-m → `move`
1. cur-nd → `no-drop`
1. cur-na → `not-allowed`
1. cur-as → `all-scroll`
1. cur-cr → `col-resize`
1. cur-rr → `row-resize`
1. cur-nr → `n-resize`
1. cur-er → `e-resize`
1. cur-sr → `s-resize`
1. cur-wr → `w-resize`
1. cur-ner → `ne-resize`
1. cur-nwr → `nw-resize`
1. cur-ser → `se-resize`
1. cur-swr → `sw-resize`
1. cur-ewr → `ew-resize`
1. cur-nsr → `ns-resize`
1. cur-neswr → `nesw-resize`
1. cur-nwser → `nwse-resize`
1. cur-zi → `zoom-in`
1. cur-zo → `zoom-out`
1. cur-g → `grab`
1. cur-gr → `grabbing`
1. cur-n → `none`
#### [`resize`](https://developer.mozilla.org/en/docs/Web/CSS/resize)
1. rz-n → `none`
1. rz-b → `both`
1. rz-h → `horizontal`
1. rz-v → `vertical`
#### [`text-overflow`](https://developer.mozilla.org/en/docs/Web/CSS/text-overflow)
1. tov-e → `ellipsis`
1. tov-c → `clip`
#### [`user-select`](https://developer.mozilla.org/en/docs/Web/CSS/user-select)
1. us-n → `none`
1. us-t → `text`
1. us-a → `all`
### Table
#### [`border-collapse`](https://developer.mozilla.org/en/docs/Web/CSS/border-collapse)
1. bdce-c → `collapse`
1. bdce-s → `separate`
1. bdce-i → `inherit`
#### [`caption-side`](https://developer.mozilla.org/en/docs/Web/CSS/caption-side)
1. cps-t → `top`
1. cps-b → `bottom`
#### [`empty-cells`](https://developer.mozilla.org/en/docs/Web/CSS/empty-cells)
1. ec-s → `show`
1. ec-h → `hide`
#### [`table-layout`](https://developer.mozilla.org/en/docs/Web/CSS/table-layout)
1. tbl-a → `auto`
1. tbl-f → `fixed`
#### [`vertical-align`](https://developer.mozilla.org/en/docs/Web/CSS/vertical-align)
1. va-sp → `super`
1. va-t → `top`
1. va-tt → `text-top`
1. va-m → `middle`
1. va-bs → `baseline`
1. va-b → `bottom`
1. va-tb → `text-bottom`
1. va-sb → `sub`
### Miscellaneous
#### [`display`](https://developer.mozilla.org/en/docs/Web/CSS/display)
1. d-n → `none`
1. d-b → `block`
1. d-fx → `flex`
1. d-li → `list-item`
1. d-ri → `run-in`
1. d-i → `inline`
1. d-itb → `inline-table`
1. d-ifx → `inline-flex`
1. d-ib → `inline-block`
1. d-tb → `table`
1. d-tcp → `table-caption`
1. d-tc → `table-column`
1. d-tcg → `table-column-group`
1. d-thg → `table-header-group`
1. d-tfg → `table-footer-group`
1. d-tr → `table-row`
1. d-trg → `table-row-group`
1. d-tcl → `table-cell`
1. d-rb → `ruby`
1. d-rbb → `ruby-base`
1. d-rbbc → `ruby-base-container`
1. d-rbt → `ruby-text`
1. d-rbtc → `ruby-text-container`
## License
The code is available under [MIT licence](LICENSE).
[1]: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend