Sass Fractions

Converts fractions to words or lowest common denominator

Install

npm install sass-fractions

or

yarn add sass-fractions

Function - wfrac()

wfrac($numerator, $denominator, $separator: '-', $lowest-common-denominator: true)

Returns the fraction passed into words

$separator - character(s) to separate the worded fraction, default: '-'

$lowest-common-denominator - Whether or not to convert the fraction into it's lowest common denominator, default: true

Usage - fraction to words as lowest common denominator

Create a simple grid

.grid-#{wfrac(2, 3)} {
  /* properties... */
}

Outputs

.grid-two-thirds {
  /* properties... */
}

Usage - fractions to words without converting

$lowest-common-denominator: false;
.grid-#{wfrac(4, 12, '_')} {
  /* properties... */
}

Outputs

.grid_four_twelfths {
  /* properties... */
}

Function - lfrac()

lfrac($numerator, $denominator, $separator: '-')

Returns the fraction passed into it's lowest common denominator.

$separator - character(s) to separate the fraction words, default: '-'

Usage - fraction to lowest common denominator

.grid-#{lfrac(5, 10)} {
  /* properties... */
}

Outputs

.grid-1-2 {
  /* properties... */
}

Multilingual

Change the default $single-fraction-names and $digit-names

// Spanish / Español
$single-fraction-names: (todo, mitad, tercio);
$digit-names: (uno, dos);

.grid-#{wfrac(2, 3)} {
  /* properties... */
}

Outputs

.grid-dos-tercios {
  /* properties... */
}

Function - frac2word()

frac2word($string, $separator: '/', $fraction-separator: '-', $lowest-common-denominator: true)

Parses the fraction as a string - returns the fraction passed into words.

$separator - character(s) that is used to separate the fraction string, default: '/'

$fraction-separator - character(s) to separate the fraction words that are returned.

$lowest-common-denominator - Whether or not to convert the fraction into it's lowest common denominator, default: true

.grid-#{frac2word('2/12')} {
  /* properties... */
}

Outputs

.grid-one-sixth {
  /* properties... */
}

Function - frac2low()

frac2low($string, $separator: '/', $fraction-separator: '-')

Parses the fraction as a string - returns the fraction in its lowest common denominator form

$separator - character(s) that is used to separate the fraction string, default: '/'

$fraction-separator - character(s) to separate the fraction words that are returned.

.grid-#{frac2low('2/12')} {
  /* properties... */
}

Outputs

.grid-1-6 {
  /* properties... */
}