https://github.com/dasx10/gulp-px2rem-converter

Convert all px to rem
https://github.com/dasx10/gulp-px2rem-converter

converter converts css gulp gulpplugin less media media2em px px2rem rem scss to

Last synced: 15 days ago
JSON representation

Convert all px to rem

• Host: GitHub
• URL: https://github.com/dasx10/gulp-px2rem-converter
• Owner: dasx10
• License: mit
• Created: 2021-02-18T13:12:21.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T21:11:14.000Z (almost 2 years ago)
• Last Synced: 2025-01-12T09:19:26.487Z (21 days ago)
• Topics: converter, converts, css, gulp, gulpplugin, less, media, media2em, px, px2rem, rem, scss, to
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/gulp-px2rem-converter
• Size: 425 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# gulp converter pixel to rem

[![Build Status](https://travis-ci.com/dasx10/gulp-px2rem-converter.svg?branch=master)](https://travis-ci.com/dasx10/gulp-px2rem-converter)

----

Convert all `px` to `rem`

## install

```

npm i -D gulp-px2rem-converter

```

## use

```

const gulp = require('gulp');

const pxToRem = require('gulp-px2rem-converter')

function css(){

    return gulp.src('./*.css')

    .pipe(pxToRem())

    .pipe(gulp.dest('./dist'))

}

module.exports.css = css;

```

If you are not using `:root` or `html` or they do not have a `font-size` then you can ignore it. The default value `16px` will be taken or you can specify this value manually

```

pxToRem(16)

```

or

```

pxToRem('16px')

```

or

```

pxToRem('100%')

```

## run

```

gulp css

```

## example

input

```

html{

    font-size: 62.5%;

}

div{

    padding: 160px;

    border:1px solid red;

}

@media (min-width:120px){

    div{

        padding: 120px;

    }

}

```

output

```

html{

    font-size: 62.5%;

}

div{

    padding: 16rem;

    border:0.1rem solid red;

}

@media (min-width:12em){

    div{

        padding: 12rem;

    }

}

```

## example use :root

input

```

:root{

    font-size: 20px;

}

html{

    font-size: 20px;

}

div{

    padding: 40px;

}

@media(min-width:1200px){

    div{

        padding: 60px;

    }

}

```

output

```

:root{

    font-size: 20px;

}

html{

    font-size: 1rem;

}

div{

    padding: 2rem;

}

@media(min-width:60em){

    div{

        padding: 3rem;

    }

}

```

----

## info

The plugin works with units such as `%` or `px`. If you are using other devices, do not use this plugin. Unable to compute units that are dynamic by the browser.

Also converts all `@media` to `em` where `px` was used. Using `em` will resize all dimensions to those specified by the user. `rem` is not used due to bugs in Safari browsers

The plugin is not case sensitive.

You can enter both `px` and `PX` or `Px`

Doesn't work if you use `font-size` in `:root` or `html`

in `@ media`.

By default will take only the first `font-size` in `:root` or `html` if there is no` font-size` value in `:root`

## compatibility

css less(http://lesscss.org/) scss