Permalink
Browse files

Added compact sass function and custom fuctions dir. Refactored mixin…

…s to support comact function.
  • Loading branch information...
1 parent 1692338 commit 7abd905a1b2a516d6ffb10a6131c649a30b70033 Phil LaPier committed Jul 2, 2011
View
@@ -1,2 +1,3 @@
*swp
*gem
+.sass-cache/
View
@@ -7,15 +7,9 @@
$name-6: false, $name-7: false,
$name-8: false, $name-9: false)
{
- $full: $name-1;
- $names: $name-2, $name-3, $name-4, $name-5,
- $name-6, $name-7, $name-8, $name-9;
-
- @each $name in $names {
- @if $name {
- $full: $full, $name;
- }
- }
+ $full: compact($name-1, $name-2, $name-3, $name-4,
+ $name-5, $name-6, $name-7, $name-8, $name-9);
+
-webkit-animation-name: $full;
-moz-animation-name: $full;
animation-name: $full;
@@ -28,15 +22,9 @@
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
- $full: $time-1;
- $times: $time-2, $time-3, $time-4, $time-5,
- $time-6, $time-7, $time-8, $time-9;
-
- @each $time in $times {
- @if $time {
- $full: $full, $time;
- }
- }
+ $full: compact($time-1, $time-2, $time-3, $time-4,
+ $time-5, $time-6, $time-7, $time-8, $time-9);
+
-webkit-animation-duration: $full;
-moz-animation-duration: $full;
animation-duration: $full;
@@ -50,15 +38,9 @@
$motion-6: false, $motion-7: false,
$motion-8: false, $motion-9: false)
{
- $full: $motion-1;
- $motions: $motion-2, $motion-3, $motion-4, $motion-5,
- $motion-6, $motion-7, $motion-8, $motion-9;
-
- @each $motion in $motions {
- @if $motion {
- $full: $full, $motion;
- }
- }
+ $full: compact($motion-1, $motion-2, $motion-3, $motion-4,
+ $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+
-webkit-animation-timing-function: $full;
-moz-animation-timing-function: $full;
animation-timing-function: $full;
@@ -72,15 +54,9 @@
$value-6: false, $value-7: false,
$value-8: false, $value-9: false)
{
- $full: $value-1;
- $values: $value-2, $value-3, $value-4, $value-5,
- $value-6, $value-7, $value-8, $value-9;
-
- @each $value in $values {
- @if $value {
- $full: $full, $value;
- }
- }
+ $full: compact($value-1, $value-2, $value-3, $value-4,
+ $value-5, $value-6, $value-7, $value-8, $value-9);
+
-webkit-animation-iteration-count: $full;
-moz-animation-iteration-count: $full;
animation-iteration-count: $full;
@@ -94,15 +70,9 @@
$direction-6: false, $direction-7: false,
$direction-8: false, $direction-9: false)
{
- $full: $direction-1;
- $directions: $direction-2, $direction-3, $direction-4, $direction-5,
- $direction-6, $direction-7, $direction-8, $direction-9;
-
- @each $direction in $directions {
- @if $direction {
- $full: $full, $direction;
- }
- }
+ $full: compact($direction-1, $direction-2, $direction-3, $direction-4,
+ $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+
-webkit-animation-direction: $full;
-moz-animation-direction: $full;
animation-direction: $full;
@@ -116,15 +86,9 @@
$state-6: false, $state-7: false,
$state-8: false, $state-9: false)
{
- $full: $state-1;
- $states: $state-2, $state-3, $state-4, $state-5,
- $state-6, $state-7, $state-8, $state-9;
-
- @each $state in $states {
- @if $state {
- $full: $full, $state;
- }
- }
+ $full: compact($state-1, $state-2, $state-3, $state-4,
+ $state-5, $state-6, $state-7, $state-8, $state-9);
+
-webkit-animation-play-state: $full;
-moz-animation-play-state: $full;
animation-play-state: $full;
@@ -137,15 +101,9 @@
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
- $full: $time-1;
- $times: $time-2, $time-3, $time-4, $time-5,
- $time-6, $time-7, $time-8, $time-9;
-
- @each $time in $times {
- @if $time {
- $full: $full, $time;
- }
- }
+ $full: compact($time-1, $time-2, $time-3, $time-4,
+ $time-5, $time-6, $time-7, $time-8, $time-9);
+
-webkit-animation-delay: $full;
-moz-animation-delay: $full;
animation-delay: $full;
@@ -160,15 +118,9 @@
$mode-6: false, $mode-7: false,
$mode-8: false, $mode-9: false)
{
- $full: $mode-1;
- $modes: $mode-2, $mode-3, $mode-4, $mode-5,
- $mode-6, $mode-7, $mode-8, $mode-9;
-
- @each $mode in $modes {
- @if $mode {
- $full: $full, $mode;
- }
- }
+ $full: compact($mode-1, $mode-2, $mode-3, $mode-4,
+ $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+
-webkit-animation-fill-mode: $full;
-moz-animation-fill-mode: $full;
animation-fill-mode: $full;
@@ -5,15 +5,9 @@
$shadow-6: false, $shadow-7: false,
$shadow-8: false, $shadow-9: false)
{
- $full: $shadow-1;
- $shadows: $shadow-2, $shadow-3, $shadow-4, $shadow-5,
- $shadow-6, $shadow-7, $shadow-8, $shadow-9;
+ $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
+ $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
- @each $shadow in $shadows {
- @if $shadow {
- $full: $full, $shadow;
- }
- }
-webkit-box-shadow: $full;
-moz-box-shadow: $full;
-ms-box-shadow: $full;
@@ -1,4 +1,4 @@
-// Legacy support for inline-block in IE7 (maybe IE6)
+/* Legacy support for inline-block in IE7 (maybe IE6) */
@mixin inline-block {
display: -moz-inline-box;
-moz-box-orient: vertical;
@@ -14,14 +14,8 @@
$pos: top; // Default position
}
- $full: $G1;
- $gradients: $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
+ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
- @each $gradient in $gradients {
- @if $gradient {
- $full: $full, $gradient;
- }
- }
background-color: nth($G1, 1);
background-image: -webkit-gradient(linear, left top, left bottom, from($G1), to($G2)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient($pos, $full);
View
@@ -1,3 +1,7 @@
+// Custom Functions
+@import "functions/compact";
+
+// CSS3 Mixins
@import "animation";
@import "border-radius";
@import "box-shadow";
@@ -5,14 +5,9 @@
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
- $full: $G1;
- $gradients: $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
- @each $gradient in $gradients {
- @if $gradient {
- $full: $full, $gradient;
- }
- }
+ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
background-color: nth($G1, 1);
background-image: -webkit-radial-gradient($pos, $shape-size, $full);
background-image: -moz-radial-gradient($pos, $shape-size, $full);
@@ -43,15 +43,9 @@
$prop-6: false, $prop-7: false,
$prop-8: false, $prop-9: false)
{
- $full: $prop-1;
- $props: $prop-2, $prop-3, $prop-4, $prop-5,
- $prop-6, $prop-7, $prop-8, $prop-9;
-
- @each $prop in $props {
- @if $prop {
- $full: $full, $prop;
- }
- }
+ $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
+ $prop-6, $prop-7, $prop-8, $prop-9);
+
-webkit-transition-property: $full;
-moz-transition-property: $full;
-ms-transition-property: $full;
@@ -65,15 +59,9 @@
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
- $full: $time-1;
- $times: $time-2, $time-3, $time-4, $time-5,
- $time-6, $time-7, $time-8, $time-9;
-
- @each $time in $times {
- @if $time {
- $full: $full, $time;
- }
- }
+ $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+ $time-6, $time-7, $time-8, $time-9);
+
-webkit-transition-duration: $full;
-moz-transition-duration: $full;
-ms-transition-duration: $full;
@@ -87,15 +75,9 @@
$motion-6: false, $motion-7: false,
$motion-8: false, $motion-9: false)
{
- $full: $motion-1;
- $motions: $motion-2, $motion-3, $motion-4, $motion-5,
- $motion-6, $motion-7, $motion-8, $motion-9;
-
- @each $motion in $motions {
- @if $motion {
- $full: $full, $motion;
- }
- }
+ $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
+ $motion-6, $motion-7, $motion-8, $motion-9);
+
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
-webkit-transition-timing-function: $full;
-moz-transition-timing-function: $full;
@@ -110,15 +92,9 @@
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
- $full: $time-1;
- $times: $time-2, $time-3, $time-4, $time-5,
- $time-6, $time-7, $time-8, $time-9;
-
- @each $time in $times {
- @if $time {
- $full: $full, $time;
- }
- }
+ $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+ $time-6, $time-7, $time-8, $time-9);
+
-webkit-transition-delay: $full;
-moz-transition-delay: $full;
-ms-transition-delay: $full;
@@ -0,0 +1,16 @@
+@function compact($var-1, $var-2: false,
+ $var-3: false, $var-4: false,
+ $var-5: false, $var-6: false,
+ $var-7: false, $var-8: false,
+ $var-9: false, $var-10: false) {
+ $full: $var-1;
+ $vars: $var-2, $var-3, $var-4, $var-5,
+ $var-6, $var-7, $var-8, $var-9, $var-10;
+
+ @each $var in $vars {
+ @if $var {
+ $full: $full, $var;
@chriseppstein

chriseppstein Jul 7, 2011

Contributor

this actually creates a list of lists. When converted to a string they look the same, but the internal representation will not work with nth() correctly. Instead you should do:

$full: append($full, $var);
+ }
+ }
+ @return $full;
+}
@@ -1,3 +1,4 @@
+/* Legacy support for inline-block in IE7 (maybe IE6) */
.clearfix:after, #buttons .button-set:after {
clear: both;
content: ' ';
@@ -1,15 +1,15 @@
-@import "../app/assets/mixins";
+@import "/app/assets/mixins";
// Clear Floated Elements
.clearfix:after {
- clear: both;
- content: ' ';
- display: block;
- font-size: 0;
- line-height: 0;
- visibility: hidden;
- width: 0;
- height: 0;
+ clear: both;
+ content: ' ';
+ display: block;
+ font-size: 0;
+ line-height: 0;
+ visibility: hidden;
+ width: 0;
+ height: 0;
}
// This is just for the example page
@@ -96,4 +96,4 @@ body {
button.color-3 {
@include button(pill, #29c13b);
}
-}
+}

0 comments on commit 7abd905

Please sign in to comment.