jouebien / px-text Goto Github PK

Px text is a small sass and js function that allows for the quick conversion of pixels to rem. Its primary purpose is to allow programmers to convert text sizes from pixel measurements into rem without requiring a calculator.

npm install --save px-text

@import 'node_modules/px-text/index.scss';

@import 'px-text/index.scss';

body {

font-size: px(18);

line-height: px(21);

}

import {px} from 'px-text'

# OR

import px from 'px-text'

import styled, { css } from 'styled-components'
import px from 'px-text'

const containerStyles = css`
	p {
		font-size: ${px(16)};
	}
`

const Container = styled.div`
    font-size: ${px(16)};
`

Running

npm test

should ouput the following

> [email protected] test
> mocha



  Running SASS Test
    The function for px conversion to rem
      √  px(16); Outputs 1rem
      √  px(18); Outputs 1.125rem
      √  px(32); Outputs 2rem

  Running JS Test
    The function for px conversion to rem
      √  px(16); Outputs 1rem
      √  px(18); Outputs 1.125rem
      √  px(32); Outputs 2rem
    The function for px conversion to rem when using the default export
      √  px(16); Outputs 1rem
      √  px(18); Outputs 1.125rem
      √  px(32); Outputs 2rem


  9 passing (5ms)

MIT https://github.com/JoueBien/px-text/blob/master/LICENSE

This library & documentation was originally written to work with the sass loader that vue 2 used. It should work with other frameworks but there are no guarantees that it will.

It is currently working with React, Svelte, Vue 2 and Vue 3. The 0.2.0 release is designed to work with more modern environments.

For vue 2 projects you may wish to use version 0.1.5 as it uses an earlier version of SASS.

If you know how to use it with other front end frameworks feel free to make a pull request or open an issue.