https://github.com/ugogo/rem-to-px-cleanup

https://github.com/ugogo/rem-to-px-cleanup

Last synced: about 6 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/ugogo/rem-to-px-cleanup
• Owner: ugogo
• Created: 2015-05-13T09:58:37.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-07-31T07:35:39.000Z (over 9 years ago)
• Last Synced: 2024-11-08T13:43:35.544Z (8 days ago)
• Language: CSS
• Size: 277 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Cleanup REM to PX

Create a new stylesheet with **only** rem values converted.

*A [Gulp plugin](https://www.npmjs.com/package/gulp-rem-to-px-cleanup) is also available*

## Default options

```js

var defaultOpts = {

  src: null,

  dist: null,

  format: true,

  silent: false,

  baseFontSize: 16,

  type: 'fs' // 'fs' || 'stream'

}

```

## Example

```js

var Converter = require('rem-to-px-cleanup');

// init Converter

var converter = new Converter({

  src: 'example/app.css',

  dist: 'example/app-ie.css',

  baseFontSize: 14

});

// trigger convertion

converter.convert();

```

#### Input (app.css)

```css

.Component {

  width: 40rem;

  height: 20px;

  margin: 0 auto;

}

.Component-child {

  padding: 0 2rem;

  background-color: blue;

}

.OtherComponent {

  display: inline-block;

  width: 50%;

  margin: 0 auto;

}

@media screen and (max-width: 30rem) {

  .Component {

    width: 80%;

    padding: 1rem;

  }

  .Component-child {

    width: 100%;

    padding: 0;

  }

}

@keyframes spin {

  0% {

    transform: rotate(0deg);

    width: 1rem;

  }

  100% {

    transform: rotate(360deg);

    width: 2rem;

  }

}

```

#### Output

```css

.Component {

  width: 560px;

}

.Component-child {

  padding: 0 28px;

}

@media screen and (max-width: 420px) {

  .Component {

    padding: 14px;

  }

}

@keyframes spin {

  0% {

    width: 14px;

  }

  100% {

    width: 28px;

  }

}

```