SASSIS is a SASS / CSS library for shorthand frontend styling.
website documentation / github repository
| .absolute .abs | position: absolute |
| .relative .rel | position: relative |
| .fixed | position: fixed |
| .sticky | position: sticky |
| .table | display: table |
| .inline .i | display: inline |
| .inline-block | display: inline-block |
| .block | display: block |
| .flex | display: flex |
| .none | display: none |
| .column .col .flex-column | flex-direction: column |
| .row .flex-row | flex-direction: row |
| .row-reverse .flex-row-reverse | flex-direction: row-reverse |
| .column-reverse .flex-column-reverse | flex-direction: column-reverse |
| .grow | flex-grow: 1 |
| .no-grow .nogrow | flex-grow: 0 |
| .cgrow > * .c-grow > * | flex-grow: 1 |
| .cnogrow > * .cno-grow > * .c-no-grow > * | flex-grow: 0 |
| .shrink | flex-shrink: 1 |
| .no-shrink | flex-shrink: 0 |
| .no-basis | flex-basis: 0 |
| .wrap | flex-wrap: wrap |
| .nowrap .no-wrap | flex-wrap: nowrap |
| .auto-space > * | margin-left: var(--column-spacing) &:first-child margin-left: 0 |
| .border-box | box-sizing: border-box |
| .italic | font-style: italic |
| .bold .strong | font-weight: bold |
| .bolder .stronger | font-weight: bold |
| .normal | font-weight: normal |
| .light | font-weight: light |
| .lighter | font-weight: lighter |
| .text-left | text-align: left |
| .text-center | text-align: center |
| .text-right | text-align: right |
| .capitalize | text-transform: capitalize |
| .uppercase | text-transform: uppercase |
| .lowercase | text-transform: lowercase |
| .underline | text-decoration: underline |
| .strike-through .line-through .cross-out | text-decoration: line-through |
| .pointer | cursor: pointer |
| .grab | cursor: grab |
| .grabbing | cursor: grabbing |
| .visible | opacity: 1 |
| .invisible .hidden | opacity: 0 |
| .no-bg | background: transparent |
| .overflow-hidden | overflow: hidden |
| .overflow-auto | overflow: auto |
| .margin-auto | margin: auto auto |
| .whitespace-normal | white-space: normal |
| .whitespace-pre .newlines | white-space: pre |
| .whitespace-nowrap | white-space: nowrap |
| .whitespace-prewrap | white-space: pre-wrap |
| .fill | position: absolute width: 100% height: 100% top: 0 left: 0 |
| .no-webkit | -webkit-appearance: none |
| .user-select-none | user-select: none |
| .flex | display: flex |
| .grow | flex-grow: 1 |
| .cgrow > * .c-grow > * | flex-grow: 1 |
| .cnogrow > * .cno-grow > * .c-no-grow > * | flex-grow: 0 |
| .shrink | flex-shrink: 1 |
| .no-shrink | flex-shrink: 0 |
| .no-basis | flex-basis: 0 |
| .wrap | flex-wrap: wrap |
| .nowrap .no-wrap | flex-wrap: nowrap |
| .auto-space > * | margin-left: var(--column-spacing) &:first-child margin-left: 0 |
| .row-[content]-[items] .+row($x, $y) | justify-content: [content] align-items: [items] flex-direction: row |
| .row-x-[content] .+row-x($val) | justify-content: [content] |
| .row-y-[items] .+row-y($val) | align-items: [items] |
| .row > .y-[items] | align-self: [items] |
| .column-[items]-[content] .+column($x, $y) | align-items: [items] justify-content: [content] flex-direction: column |
| .column-x-[items] .+column-x($val) | align-items: [items] |
| .column > .x-[items] | align-self: [items] |
| .column-y-[content] .+column-y($val) | justify-content: [content] |
| .align-self-center | align-self: center |
| .align-self-end | align-self: end |
| .align-self-flex-end | align-self: flex-end |
| .align-self-start | align-self: start |
| .align-self-flex-start | align-self: flex-start |
| .align-self-stretch | align-self: stretch |
| .align-self-baseline | align-self: baseline |
| .align-items-center | align-items: center |
| .align-items-end | align-items: end |
| .align-items-flex-end | align-items: flex-end |
| .align-items-start | align-items: start |
| .align-items-flex-start | align-items: flex-start |
| .align-items-stretch | align-items: stretch |
| .align-items-baseline | align-items: baseline |
| .justify-self-center | justify-self: center |
| .justify-self-end | justify-self: end |
| .justify-self-flex-end | justify-self: flex-end |
| .justify-self-start | justify-self: start |
| .justify-self-flex-start | justify-self: flex-start |
| .justify-self-stretch | justify-self: stretch |
| .justify-self-baseline | justify-self: baseline |
| .justify-items-center | justify-items: center |
| .justify-items-end | justify-items: end |
| .justify-items-flex-end | justify-items: flex-end |
| .justify-items-start | justify-items: start |
| .justify-items-flex-start | justify-items: flex-start |
| .justify-items-stretch | justify-items: stretch |
| .justify-items-baseline | justify-items: baseline |
| .align-content-space-between | align-content: space-between |
| .align-content-space-evenly | align-content: space-evenly |
| .align-content-space-around | align-content: space-around |
| .align-content-left | align-content: left |
| .align-content-right | align-content: right |
| .align-content-center | align-content: center |
| .align-content-end | align-content: end |
| .align-content-flex-end | align-content: flex-end |
| .align-content-start | align-content: start |
| .align-content-flex-start | align-content: flex-start |
| .align-content-stretch | align-content: stretch |
| .justify-content-space-between | justify-content: space-between |
| .justify-content-space-evenly | justify-content: space-evenly |
| .justify-content-space-around | justify-content: space-around |
| .justify-content-left | justify-content: left |
| .justify-content-right | justify-content: right |
| .justify-content-center | justify-content: center |
| .justify-content-end | justify-content: end |
| .justify-content-flex-end | justify-content: flex-end |
| .justify-content-start | justify-content: start |
| .justify-content-flex-start | justify-content: flex-start |
| .justify-content-stretch | justify-content: stretch |
| .pt[num][~|px|pc] .+pt($val) | padding-top: [num][em|px|pc] |
| .pr[num][~|px|pc] .+pr($val) | padding-right: [num][em|px|pc] |
| .pl[num][~|px|pc] .+pl($val) | padding-left: [num][em|px|pc] |
| .pb[num][~|px|pc] .+pb($val) | padding-bottom: [num][em|px|pc] |
| .plr[num][~|px|pc] .+plr($val) | padding-left: [num][em|px|pc] padding-right: [num][em|px|pc] |
| .ptb[num][~|px|pc] .+ptb($val) | padding-top: [num][em|px|pc] padding-bottom: [num][em|px|pc] |
| .p[num][~|px|pc] .+p($val) | padding: [num][em|px|pc] |
| .cp{succ}[rule] .+cp{succ}[rule] | > * {succ}[rule] |
| .mt[num][~|px|pc] .+mt($val) | margin-top: [num][em|px|pc] |
| .mr[num][~|px|pc] .+mr($val) | margin-right: [num][em|px|pc] |
| .ml[num][~|px|pc] .+ml($val) | margin-left: [num][em|px|pc] |
| .mb[num][~|px|pc] .+mb($val) | margin-bottom: [num][em|px|pc] |
| .mlr[num][~|px|pc] .+mlr($val) | margin-left: [num][em|px|pc] margin-right: [num][em|px|pc] |
| .mtb[num][~|px|pc] .+mtb($val) | margin-top: [num][em|px|pc] margin-bottom: [num][em|px|pc] |
| .m[num][~|px|pc] .+m($val) | margin: [num][em|px|pc] |
| .cm{succ}[rule] .+cm{succ}[rule] | > * {succ}[rule] |
| .bt[0-10]-[solid|dashed|dotted] .+bt($val, $type) | border-top-width: [0-10]px border-top-style: [solid|dashed|dotted] |
| .br[0-10]-[solid|dashed|dotted] .+br($val, $type) | border-right-width: [0-10]px border-right-style: [solid|dashed|dotted] |
| .bl[0-10]-[solid|dashed|dotted] .+bl($val, $type) | border-left-width: [0-10]px border-left-style: [solid|dashed|dotted] |
| .bb[0-10]-[solid|dashed|dotted] .+bb($val, $type) | border-bottom-width: [0-10]px border-bottom-style: [solid|dashed|dotted] |
| .blr[0-10]-[solid|dashed|dotted] .+blr($val, $type) | border-left-width: [0-10]px border-right-width: [0-10]px border-right-style: [solid|dashed|dotted] border-left-style: [solid|dashed|dotted] |
| .btb[0-10]-[solid|dashed|dotted] .+btb($val, $type) | border-top-width: [0-10]px border-bottom-width: [0-10]px border-top-style: [solid|dashed|dotted] border-bottom-style: [solid|dashed|dotted] |
| .b[0-10]-[solid|dashed|dotted] .+b($val, $type) | border: [0-10]px [solid|dashed|dotted] |
| .cb{succ}[rule] .+cb{succ}[rule] | > * {succ}[rule] |
| .s[num][~|px|pc] .+s($val) | flex-basis: [num][em|px|pc] |
| .cs{succ}[rule] .+cs{succ}[rule] | > .spacer {succ}[rule] |
| .t[num][~|px|pc] .+t($val) | top: [num][em|px|pc] |
| .r[num][~|px|pc] .+r($val) | right: [num][em|px|pc] |
| .l[num][~|px|pc] .+l($val) | left: [num][em|px|pc] |
| .b[num][~|px|pc] .+b($val) | bottom: [num][em|px|pc] |
| .lr[num][~|px|pc] .+lr($val) | left: [num][em|px|pc] right: [num][em|px|pc] |
| .tb[num][~|px|pc] .+tb($val) | top: [num][em|px|pc] bottom: [num][em|px|pc] |
| .c{succ}[rule] .+c{succ}[rule] | > * {succ}[rule] |
| .w[0-100]em .+w($val) | width: [0-100]em |
| .w[0-1000]px .+w($val) | width: [0-1000]px |
| .w[0-100]pc .+w($val) | width: [0-100]% |
| .w[0-100]vw .+w($val) | width: [0-100]vw |
| .w-auto .+w-auto | width: auto |
| .h[0-100]em .+h($val) | height: [0-100]em |
| .h[0-1000]px .+h($val) | height: [0-1000]px |
| .h[0-100]pc .+h($val) | height: [0-100]% |
| .h[0-100]vh .+h($val) | height: [0-100]vh |
| .h-auto .+h-auto | height: auto |
| .minw[0-100]em .+minw($val) | min-width: [0-100]em |
| .minw[0-1000]px .+minw($val) | min-width: [0-1000]px |
| .minw[0-100]pc .+minw($val) | min-width: [0-100]% |
| .minw[0-100]vw .+minw($val) | min-width: [0-100]vw |
| .minw-auto .+minw-auto | min-width: auto |
| .minh[0-100]em .+minh($val) | min-height: [0-100]em |
| .minh[0-1000]px .+minh($val) | min-height: [0-1000]px |
| .minh[0-100]pc .+minh($val) | min-height: [0-100]% |
| .minh[0-100]vh .+minh($val) | min-height: [0-100]vh |
| .minh-auto .+minh-auto | min-height: auto |
| .maxw[0-100]em .+maxw($val) | max-width: [0-100]em |
| .maxw[0-1000]px .+maxw($val) | max-width: [0-1000]px |
| .maxw[0-100]pc .+maxw($val) | max-width: [0-100]% |
| .maxw[0-100]vw .+maxw($val) | max-width: [0-100]vw |
| .maxw-auto .+maxw-auto | max-width: auto |
| .maxh[0-100]em .+maxh($val) | max-height: [0-100]em |
| .maxh[0-1000]px .+maxh($val) | max-height: [0-1000]px |
| .maxh[0-100]pc .+maxh($val) | max-height: [0-100]% |
| .maxh[0-100]vh .+maxh($val) | max-height: [0-100]vh |
| .maxh-auto .+maxh-auto | max-height: auto |
| .basis[0-100]em .+basis($val) | flex-basis: [0-100]em |
| .basis[0-1000]px .+basis($val) | flex-basis: [0-1000]px |
| .basis[0-100]pc .+basis($val) | flex-basis: [0-100]% |
| .basis-auto .+basis-auto | flex-basis: auto |
| .radius[0-100][em|pc|px] .+radius($val) | border-radius: [0-100][em|pc|px] |
| .radius[0-100][em|pc|px]-top .+radius-top($val) | border-top-left-radius: [0-100][em|pc|px] border-top-right-radius: [0-100][em|pc|px] |
| .radius[0-100][em|pc|px]-bottom .+radius-bottom($val) | border-bottom-left-radius: [0-100][em|pc|px] border-bottom-right-radius: [0-100][em|pc|px] |
| .radius[0-100][em|pc|px]-left .+radius-left($val) | border-top-left-radius: [0-100][em|pc|px] border-bottom-left-radius: [0-100][em|pc|px] |
| .radius[0-100][em|pc|px]-right .+radius-right($val) | border-top-right-radius: [0-100][em|pc|px] border-bottom-right-radius: [0-100][em|pc|px] |
| .radius[0-1000][em|pc|px]-top .+radius-top($val) | border-top-left-radius: [0-1000][em|pc|px] border-top-right-radius: [0-1000][em|pc|px] |
| .radius[0-1000][em|pc|px]-bottom .+radius-bottom($val) | border-bottom-left-radius: [0-1000][em|pc|px] border-bottom-right-radius: [0-1000][em|pc|px] |
| .radius[0-1000][em|pc|px]-left .+radius-left($val) | border-top-left-radius: [0-1000][em|pc|px] border-bottom-left-radius: [0-1000][em|pc|px] |
| .radius[0-1000][em|pc|px]-right .+radius-right($val) | border-top-right-radius: [0-1000][em|pc|px] border-bottom-right-radius: [0-1000][em|pc|px] |
| .radius[0-100][em|pc|px]-top .+radius-top($val) | border-top-left-radius: [0-100][em|pc|px] border-top-right-radius: [0-100][em|pc|px] |
| .radius[0-100][em|pc|px]-bottom .+radius-bottom($val) | border-bottom-left-radius: [0-100][em|pc|px] border-bottom-right-radius: [0-100][em|pc|px] |
| .radius[0-100][em|pc|px]-left .+radius-left($val) | border-top-left-radius: [0-100][em|pc|px] border-bottom-left-radius: [0-100][em|pc|px] |
| .radius[0-100][em|pc|px]-right .+radius-right($val) | border-top-right-radius: [0-100][em|pc|px] border-bottom-right-radius: [0-100][em|pc|px] |
| .radius-auto .+radius-auto | border-radius: auto |
| .translate00 | transform: translate( 0%, 0%) |
| .origin00 | transform-origin: 0% 0% |
| .translate0-50 | transform: translate( 0%, -50%) |
| .origin0-50 | transform-origin: 0% -50% |
| .translate050 | transform: translate( 0%, 50%) |
| .origin050 | transform-origin: 0% 50% |
| .translate0100 | transform: translate( 0%, 100%) |
| .origin0100 | transform-origin: 0% 100% |
| .translate0-100 | transform: translate( 0%, -100%) |
| .origin0-100 | transform-origin: 0% -100% |
| .translate-500 | transform: translate( -50%, 0%) |
| .origin-500 | transform-origin: -50% 0% |
| .translate-50-50 | transform: translate( -50%, -50%) |
| .origin-50-50 | transform-origin: -50% -50% |
| .translate-5050 | transform: translate( -50%, 50%) |
| .origin-5050 | transform-origin: -50% 50% |
| .translate-50100 | transform: translate( -50%, 100%) |
| .origin-50100 | transform-origin: -50% 100% |
| .translate-50-100 | transform: translate( -50%, -100%) |
| .origin-50-100 | transform-origin: -50% -100% |
| .translate500 | transform: translate( 50%, 0%) |
| .origin500 | transform-origin: 50% 0% |
| .translate50-50 | transform: translate( 50%, -50%) |
| .origin50-50 | transform-origin: 50% -50% |
| .translate5050 | transform: translate( 50%, 50%) |
| .origin5050 | transform-origin: 50% 50% |
| .translate50100 | transform: translate( 50%, 100%) |
| .origin50100 | transform-origin: 50% 100% |
| .translate50-100 | transform: translate( 50%, -100%) |
| .origin50-100 | transform-origin: 50% -100% |
| .translate1000 | transform: translate( 100%, 0%) |
| .origin1000 | transform-origin: 100% 0% |
| .translate100-50 | transform: translate( 100%, -50%) |
| .origin100-50 | transform-origin: 100% -50% |
| .translate10050 | transform: translate( 100%, 50%) |
| .origin10050 | transform-origin: 100% 50% |
| .translate100100 | transform: translate( 100%, 100%) |
| .origin100100 | transform-origin: 100% 100% |
| .translate100-100 | transform: translate( 100%, -100%) |
| .origin100-100 | transform-origin: 100% -100% |
| .translate-1000 | transform: translate( -100%, 0%) |
| .origin-1000 | transform-origin: -100% 0% |
| .translate-100-50 | transform: translate( -100%, -50%) |
| .origin-100-50 | transform-origin: -100% -50% |
| .translate-10050 | transform: translate( -100%, 50%) |
| .origin-10050 | transform-origin: -100% 50% |
| .translate-100100 | transform: translate( -100%, 100%) |
| .origin-100100 | transform-origin: -100% 100% |
| .translate-100-100 | transform: translate( -100%, -100%) |
| .origin-100-100 | transform-origin: -100% -100% |
| .cursor-auto | cursor: auto |
| .cursor-inherit | cursor: inherit |
| .cursor-crosshair | cursor: crosshair |
| .cursor-default | cursor: default |
| .cursor-help | cursor: help |
| .cursor-move | cursor: move |
| .cursor-pointer | cursor: pointer |
| .cursor-progress | cursor: progress |
| .cursor-text | cursor: text |
| .cursor-wait | cursor: wait |
| .cursor-e-resize | cursor: e-resize |
| .cursor-ne-resize | cursor: ne-resize |
| .cursor-nw-resize | cursor: nw-resize |
| .cursor-n-resize | cursor: n-resize |
| .cursor-se-resize | cursor: se-resize |
| .cursor-sw-resize | cursor: sw-resize |
| .cursor-s-resize | cursor: s-resize |
| .cursor-w-resize | cursor: w-resize |
| .cursor-grab | cursor: grab |
| .cursor-grabbing | cursor: grabbing |
| .cursor-zoom-in | cursor: zoom-in |
| .cursor-zoom-out | cursor: zoom-out |
| .f0, h6, .h6 .+f0 | font-size: 0.785714rem |
| .f1, h5, .h5 .+f1 | font-size: 1rem |
| .f2, h4, .h4 .+f2 | font-size: 1.2857rem |
| .f3, h3, .h3 .+f3 | font-size: 1.64285rem |
| .f4, h2, .h2 .+f4 | font-size: 2.071428rem |
| .f5, h1, .h1 .+f5 | font-size: 2.642857rem |
| .z-index0-99 .+z-index( $z ) | z-index: 0-99 |
| .opacity0-99 .+opacity( $z ) | opacity: 0-99 |
| .monospace .+monospace | font-family: var(--font-monospace) |
| .serif .+serif | font-family: var(--font-serif) |
| .sans-serif .+sans-serif | font-family: var(--font-sans-serif) |
| .cursive .+cursive | font-family: var(--font-cursive) |
| .slab .+slab | font-family: var(--font-slab) |
| .grotesque .+grotesque | font-family: var(--font-grotesque) |