Merge pull request #26 from jenius/named-scales

added support for named scale items

Author: Jeff Escalante

readme.md

@@ -43,6 +43,21 @@ A list of values that you can reference by index in most of the mixins listed be
 rupture.scale = 0 400px 600px 800px 1050px
 ```
 
+##### `rupture.scale-names`
+A list of strings you can reference that correspond to their index location in `rupture.scale`. This works exactly like [breakpoint-slicer](https://github.com/lolmaus/breakpoint-slicer#calling-slices-by-names-rather-than-numbers)
+
+```
+rupture.scale =        0        400px       600px      800px        1050px
+
+//                     └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────
+// Slice numbers:           1           2           3           4           5
+rupture.scale-names:       'xs'        's'         'm'         'l'         'xl'
+```
+
+```js
+rupture.scale-names = 'xs' 's' 'm' 'l' 'xl'
+```
+
 ##### `rupture.enable-em-breakpoints`
 Enables Rupture's [PX to EM unit conversion](#px-to-em-unit-conversion) feature. If set to true, pixel breakpoint values will be automatically converted into em values.
 
@@ -190,7 +205,7 @@ rupture.anti-overlap = 1px 0.0625em 0.0625rem // explicit relative values will b
 If you don't want to enable anti-overlapping globally, you can enable or disable it locally by passing the `anti-overlap` keyword argument to any of the mixins except `retina()`. This works exactly like the global `rupture.anti-overlap` variable, except you can specify it per mixin call. For example:
 
 ```
-.overlap-force 
+.overlap-force
   text-align center
   +at(2, anti-overlap: true)
     text-align right
@@ -224,7 +239,7 @@ rupture.anti-overlap = 1px
     text-align right
   +at(3)
     text-align left
-      
+
 /**
   * compiles to:
   * .some-ui-element {

rupture/index.styl

@@ -11,6 +11,14 @@ rupture = {
 }
 
 rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff)
+rupture.scale-names = 'xs' 's' 'm' 'l' 'xl'
+
+-get-index(item, list)
+  index = false
+  for list-item, i in list
+    if list-item is item
+      index = i
+  return index
 
 -convert-to(to-unit, value, context = rupture.base-font-size)
   from-unit = unit(value)
@@ -44,7 +52,7 @@ rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff)
   if (side is 'min' and -shift > 0) or (side is 'max' and -shift < 0)
     n = n + -shift
   return n
-    
+
 -is-positive(n)
   return n >= 0
 
@@ -76,6 +84,13 @@ rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff)
 //   - +between(200px, 4) custom:scale
 
 between(min, max, anti-overlap = rupture.anti-overlap, density = null, orientation = null)
+
+  if typeof(min) is 'string'
+    min = rupture.scale[-get-index(min, rupture.scale-names)]
+
+  if typeof(max) is 'string'
+    max = rupture.scale[-get-index(max, rupture.scale-names)]
+
   -min = rupture.scale[min - 1] unless -is-zero(min) or (not -on-scale(min))
   -max = rupture.scale[max] unless not -on-scale(max)
   -min ?= min

test/fixtures/expected/named.css

@@ -0,0 +1,8 @@
+.hello {
+  color: #f00;
+}
+@media only screen and (min-width: 400px) and (max-width: 800px) {
+  .hello {
+    color: #fff;
+  }
+}

test/fixtures/named.styl

@@ -0,0 +1,5 @@
+.hello
+  color: red
+
+  +between('s', 'l')
+    color: white

test/test.coffee

@@ -54,4 +54,7 @@ describe 'basic', ->
     match_expected('ems.styl', done)
 
   it 'adds anti-overlap correction to prevent overlapping media queries', (done) ->
-    match_expected('overlap.styl', done)
+    match_expected('overlap.styl', done)
+
+  it 'supports named scale units', (done) ->
+    match_expected('named.styl', done)