mhulse / rex

On, Wildfire, on!
http://mhulse.github.io/rex/demo/
Apache License 2.0
4 stars 0 forks source link

SCSS functions to add #86

Closed mhulse closed 11 years ago

mhulse commented 11 years ago

Still rough, but it's a start. More to come.

// Convert `px` to `%`.
//
// Formula: ([desired `font-size` in `px`] / [parent `font-size` in `px`]) * `100`
// Example: (`12px` / `16px`) * `100` = `75%`
//
// Usage:
// ```
// ...
// ```
//
// Output:
// ```
// ...
// ```

@function px2pct($px: $font-size-base, $context: $font-size-base) {

    @return ((unitless($px) / unitless($context)) * 100);

}

// Convert `px` to `pt`.
//
// Formula: [desired `font-size` in `px`] * ([`pts` per `in`] / [`px` per `in`])  
// Example: `16px` * (`72pt` / `96px`) = `12pt`
//
// Usage:
// ```
// ...
// ```
//
// Output:
// ```
// ...
// ```

@function px2pt($px: $font-size-base) {

    @return (unitless($px) * (72 / 96));

}

// Convert `em` to `px`.
//
// Formula: [desired `font-size` in `em`] * [parent `font-size` in `px`]
// Example: `.75em` * `16px` = `12px`
//
// Usage:
// ```
// ...
// ```
//
// Output:
// ```
// ...
// ```

@function em2px($em, $context: $font-size-base) {

    @return (unitless($em) * unitless($context));

}

// Convert `em` to `%`:
//
// Formula: [desired `font-size` in `em`] * `100`
// Example: `.75em` * `100` = `75%`
//
// Usage:
// ```
// ...
// ```
//
// Output:
// ```
// ...
// ```

@function em2px($em) {

    @return (unitless($em) * 100);

}