add ability to pass identical context to variable span

ezekg · Sep 17, 2014 · e366e1d · e366e1d
1 parent 1229bd3
commit e366e1d
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+### 2.0.0.rc.4 - 9/17/14
+* Added ability to use a identical `$context` value with a variable `$span`.
+
 ### 2.0.0.rc.3 - 9/16/14
 * Fixed issue with `$context` modifiers calling a division by 0.
 

diff --git a/bower.json b/bower.json
@@ -1,12 +1,12 @@
 {
   "name": "flint",
-  "version": "2.0.0.rc.1",
+  "version": "2.0.0.rc.4",
   "main": "stylesheets/_flint.scss",
   "description": "Flint is a highly advanced Sass grid framework designed for rapid responsive development.",
   "authors": ["Ezekiel Gabrielse <[email protected]>"],
-  "homepage": "https://github.com/ezekg/flint/",
+  "homepage": "http://flint.gs",
   "keywords": [
-    "layout", "grid", "grid-system", "sass", "responsive", "rwd", "semantic"
+    "grid-system", "grid-framework", "framework", "ui", "grid", "layout", "flint", "breakpoint", "breakpoints", "semantic", "responsive-web-design"
   ],
   "license": "MIT",
   "ignore": [

diff --git a/lib/flint.rb b/lib/flint.rb
@@ -10,8 +10,8 @@
 end
 
 module Flint
-    VERSION = "2.0.0.rc.3"
-    DATE = "2014-09-16"
+    VERSION = "2.0.0.rc.4"
+    DATE = "2014-09-17"
 end
 
 module Sass::Script::Functions

diff --git a/stylesheets/flint/mixins/lib/_main.scss b/stylesheets/flint/mixins/lib/_main.scss
@@ -260,9 +260,21 @@
         or flint-types-in-list($key, "number") and $span == null
 
         /**
-         * Variable shorthand with context
+         * Variable shorthand with identical context
          *
-         * @param {List} $key  - span value for each breakpoint
+         * @param {List}            $key  - span value for each breakpoint
+         * @param {Number | String} $span - context value for each breakpoint
+         *
+         * @example scss
+         * _(1 2 3 4, 4) | _(1 2 3 4, auto)
+         */
+        or flint-types-in-list($key, "number") and flint-is-number($span) and length($span) == 1
+        or flint-types-in-list($key, "number") and $span == "auto"
+
+        /**
+         * Variable shorthand with differing context
+         *
+         * @param {List}          $key  - span value for each breakpoint
          * @param {List | String} $span - context value for each breakpoint
          *
          * @example scss

diff --git a/tests/input/output.scss b/tests/input/output.scss
@@ -224,6 +224,18 @@ $color__yellow: #FFF87B;
     }
 }
 
+.col-quarter {
+    @include _(4);
+    height: auto !important;
+
+    &:before { content: "1/4"; }
+
+    .col-quarter-child {
+        @include _(2 2 1 1, 4);
+        height: 100% !important;
+    }
+}
+
 div[class*="col"] {
     position: relative;
     font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

diff --git a/tests/output/output.css b/tests/output/output.css
@@ -1862,6 +1862,66 @@ Test Results {
   }
 }
 
+.col-quarter {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  height: auto !important;
+}
+@media (min-width: 60.0625em) {
+  .col-quarter {
+    width: 23.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-quarter {
+    width: 31.25%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-quarter {
+    width: 46.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+.col-quarter:before {
+  content: "1/4";
+}
+.col-quarter .col-quarter-child {
+  float: left;
+  width: 18.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  height: 100% !important;
+}
+@media (min-width: 60.0625em) {
+  .col-quarter .col-quarter-child {
+    width: 43.75%;
+    margin-right: 3.125%;
+    margin-left: 3.125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-quarter .col-quarter-child {
+    width: 43.75%;
+    margin-right: 3.125%;
+    margin-left: 3.125%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-quarter .col-quarter-child {
+    width: 18.75%;
+    margin-right: 3.125%;
+    margin-left: 3.125%;
+  }
+}
+
 div[class*="col"] {
   position: relative;
   font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

diff --git a/tests/tests.html b/tests/tests.html
@@ -106,5 +106,33 @@
             </div>
     	</article>
     </section>
+    <section>
+        <article class="container">
+            <div class="col-quarter">
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+            </div>
+            <div class="col-quarter">
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+            </div>
+            <div class="col-quarter">
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+            </div>
+            <div class="col-quarter">
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+                <div class="col-quarter-child"></div>
+            </div>
+        </article>
+    </section>
 </body>
 </html>