First commit

README.md

@@ -0,0 +1,55 @@
+# Em
+
+Sass function and mixin to convert px in em.
+
+Compatibility: Sass 3.2+ (3.3+ for the mixin) and LibSass
+
+---
+
+## Install
+
+Download [`_em.scss`](https://raw.githubusercontent.com/pierreburel/sass-em/master/_em.scss) or install with [Bower](http://bower.io/):
+
+```
+bower install sass-em
+```
+
+---
+
+## Usage
+
+Import `_em.scss` and use the `em` mixin or function.  
+
+The function takes at least 2 parameters: the value(s) (px, mixed) and the context (px).  
+There can be multiple values (eg. multiple box shadow), but **the last parameter must be the context**.  
+
+The mixin takes only 2 parameters: the properties (map of `property: value`) and the context (px). It can be used to convert the values of multiple properties with the same context.
+
+## Example :
+
+```scss
+@import "em";
+
+h1 {
+  font-size: em(24px, 16px); // Simple
+  border-bottom: em(1px solid black, 24px); // Shorthand
+  box-shadow: em(0 0 2px #ccc, inset 0 0 5px #eee, 24px); // Multiple values
+  // Mixin (Sass 3.3+)
+  @include em((
+    margin: 20px 10px,
+    padding: 10px
+  ), 24px);
+}
+```
+
+That will output :
+
+```css
+h1 {
+  font-size: 1.5em;
+  border-bottom: 0.04167em solid black;
+  box-shadow: 0 0 0.08333em #ccc, inset 0 0 0.20833em #eee;
+  margin: 0.83333em 0.41667em;
+  padding: 0.41667em;
+}
+```

_em.scss

@@ -0,0 +1,38 @@
+// list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function)
+@function em-separator($list) {
+  @if function-exists("list-separator") == true {
+    @return list-separator($list);
+  }
+
+  $test-list: ();
+  @each $item in $list {
+    $test-list: append($test-list, $item, space);
+  }
+
+  @return if($test-list == $list, space, comma);
+}
+
+@function em($values...) {  
+  $context: nth($values, length($values));
+  $result: ();
+  $separator: em-separator($values);
+
+  @for $i from 1 through length($values) - 1 {
+    $value: nth($values, $i);
+    @if type-of($value) == "number" and unit($value) == "px" {
+      $result: append($result, $value / $context * 1em, $separator);
+    } @else if type-of($value) == "list" {
+      $result: append($result, em(append($value, $context)...), $separator);
+    } @else {
+      $result: append($result, $value, $separator);
+    }
+  }
+
+  @return $result;
+}
+
+@mixin em($properties, $context) {
+  @each $property, $value in $properties {
+    #{$property}: em(append($value, $context)...);
+  }
+}

bower.json

@@ -0,0 +1,20 @@
+{
+  "name": "sass-em",
+  "description": "Sass function and mixin to convert px in em.",
+  "version": "1.0.0",
+  "homepage": "https://github.com/pierreburel/sass-em",
+  "main": "_em.scss",
+  "authors": [
+    "Pierre Burel <[email protected]>"
+  ],
+  "keywords": [
+    "sass",
+    "em",
+    "responsive"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "sache.json"
+  ]
+}

sache.json

@@ -0,0 +1,10 @@
+{
+  "name": "sass-em",
+  "description": "Sass function and mixin to convert px in em.",
+  "tags": [
+    "sass",
+    "em",
+    "responsive"
+  ],
+  "website": "https://github.com/pierreburel/sass-em"
+}