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



remixins for {

###自动将像素度量转换为rem单位。

remixin是 {less} mixins的集合,可帮助您开始使用rem单位,而无需对每个规则进行编码像素回退。使用像素对您的CSS进行编码。 remixins将自动将它们转换为rem单位。

remixins包含用于衡量单位的最常用属性的 {less} 混合。

可用于以下CSS属性的Mixins:

  • font-size line-height text-indent
  • margin (s)
  • padding (s)
  • height width (包括min-和max - )
  • top left bottom 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.

示例:

{less}:

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

CSS结果:

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

{less}

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

CSS结果:

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

包含的混合物

  • .font-size(@value)
  • .line-height(@value)
  • .text-indent(@value)
  • .margin(@value)
  • .margin(@vertical,@horizo​​ntal)
  • .margin-top(@value)
  • .margin-right(@value)
  • .margin-bottom(@value)
  • .margin-left(@value)
  • .padding(@value)
  • .padding(@vertical,@horizo​​ntal)
  • .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




相关问题推荐