Skip to content
Automatically convert pixel measures into rem in {less}.
CSS
Latest commit b7ac8a9 Aug 19, 2014 @christopher-ramirez Merge pull request #6 from mel0mani4/patch-1
Typo correction
Failed to load latest commit information.
.gitignore Adding temp files ext to gitignore. Sep 6, 2012
README.md Update README.md Sep 7, 2012
remixins.less Typo correction Aug 19, 2014

README.md

remixins for {less}

Automatically convert pixel measures into rem units.

remixins is a collection of {less} mixins that helps you start using rem units without coding pixels fallbacks on every rule. Code your CSS using pixels. remixins will automatically convert them to rem units.

remixins includes {less} mixins for most popular properties where rem is used as a measure unit.

Mixins available for the following CSS properties:

  • font-size, line-height and text-indent.
  • margin(s)
  • padding(s)
  • height and width (including min- and max-)
  • top, left, bottom and right.

How to use it:

  1. Download remixins.less
  2. Set @base-font-size-px (line 2) to your integer root's font size. Note that @base-font-size-px MUST BE AN INTEGER (without any measure unit).
  3. Import downloaded file @import "remixins.less.

Examples:

{less}:

    .element {
        .font-size(16px);
    }

CSS result:

    .element {
        font-size: 16px;
        font-size: 1.6rem;
    }

{less}

    .element {
        .margin(10px, 3%);
    }

CSS result:

    .element {
        margin: 10px 3%;
        margin: 1rem 3%;
    }

Included mixins

  • .font-size(@value)
  • .line-height(@value)
  • .text-indent(@value)
  • .margin(@value)
  • .margin(@vertical, @horizontal)
  • .margin-top(@value)
  • .margin-right(@value)
  • .margin-bottom(@value)
  • .margin-left(@value)
  • .padding(@value)
  • .padding(@vertical, @horizontal)
  • .padding-top(@value)
  • .padding-right(@value)
  • .padding-bottom(@value)
  • .padding-left(@value)
  • .height(@value)
  • .min-height(@value)
  • .max-height(@value)
  • .width(@value)
  • .min-width(@value)
  • .max-width(@value)
  • .top(@value)
  • .left(@value)
  • .bottom(@value)
  • .right(@value)

@chrRamirez

Something went wrong with that request. Please try again.