Skip to content
Browse files

Code is more readable, some shorthands are added and some mixins remo…

…ved.

- indent properties and align values
- add mixing `margin()`, `padding()` and `border-width()`
- remove `lrswap2()`: no really critical use case & confusing
- `$rtl` has a default value
- prefer `$val` to `$value` and `$values`, more explicit
- tests are in a separate file
  • Loading branch information...
1 parent 199ae2e commit e6f25add2d1e27a71a0aef344119663d7bf0cf86 @kaelig kaelig committed Oct 8, 2012
Showing with 349 additions and 387 deletions.
  1. +15 −8 css/ltr.css
  2. +17 −8 css/rtl.css
  3. +21 −21 ltr.html
  4. +2 −141 sass/_core.scss
  5. +141 −205 sass/_helpers.scss
  6. +146 −0 sass/_test.scss
  7. +3 −2 sass/ltr.scss
  8. +4 −2 sass/rtl.scss
View
23 css/ltr.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
margin: 0;
padding: 0; }
@@ -18,6 +19,9 @@ h1 {
background: #CCC;
position: relative; }
+/* ==========
+ * = Testing
+ * ========== */
/* background */
#background-position {
background-position: 8px 100px; }
@@ -110,6 +114,9 @@ h1 {
margin-right: 8px; }
/* padding */
+#padding-0-8px-16px-24px {
+ padding: 0 8px 16px 24px; }
+
#padding-left {
padding-left: 8px; }
@@ -127,10 +134,10 @@ h1 {
text-indent: 8px; }
/* 4 value swaps */
-#lrswap {
- padding: 0px 8px 16px 24px;
- margin: 0px 8px 16px 24px; }
-
-#lrswap2 {
- padding: 0px 8px 16px 24px;
- margin: 0px 8px 16px 24px; }
+#lrswap-0-8px-16px-24px {
+ /* Should return the same 2 values: */
+ padding: 0 8px 16px 24px;
+ padding: 0 8px 16px 24px;
+ /* Should return the same 2 values: */
+ margin: 0 8px 16px 24px;
+ margin: 0 8px 16px 24px; }
View
25 css/rtl.css
@@ -1,4 +1,7 @@
-html, body {
+@charset "UTF-8";
+/* Values should be inverted (left/right…) */
+html,
+body {
margin: 0;
padding: 0; }
@@ -18,6 +21,9 @@ h1 {
background: #CCC;
position: relative; }
+/* ==========
+ * = Testing
+ * ========== */
/* background */
#background-position {
background-position: -8px 100px; }
@@ -110,6 +116,9 @@ h1 {
margin-left: 8px; }
/* padding */
+#padding-0-8px-16px-24px {
+ padding: 0 24px 16px 8px; }
+
#padding-left {
padding-right: 8px; }
@@ -127,10 +136,10 @@ h1 {
text-indent: -8px; }
/* 4 value swaps */
-#lrswap {
- padding: 0px 24px 16px 8px;
- margin: 0px 24px 16px 8px; }
-
-#lrswap2 {
- padding: 0px 24px 16px 8px;
- margin: 0px 24px 16px 8px; }
+#lrswap-0-8px-16px-24px {
+ /* Should return the same 2 values: */
+ padding: 0 24px 16px 8px;
+ padding: 0 24px 16px 8px;
+ /* Should return the same 2 values: */
+ margin: 0 24px 16px 8px;
+ margin: 0 24px 16px 8px; }
View
42 ltr.html
@@ -1,37 +1,37 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
- <meta charset="utf-8"/>
- <title>LTR Sample Page</title>
- <link rel="stylesheet" href="css/ltr.css"/>
+ <meta charset="utf-8" />
+ <title>LTR Sample Page</title>
+ <link rel="stylesheet" href="css/ltr.css" />
</head>
<body>
- <div id="container">
- <h1>LTR Sample Page</h1>
+ <div id="container">
+ <h1>LTR Sample Page</h1>
- <h2>Background</h2>
+ <h2>Background</h2>
- <h2>Border</h2>
+ <h2>Border</h2>
- <h2>Direction</h2>
+ <h2>Direction</h2>
- <h2>Float</h2>
- <div id="float-origin-left" class="box">Float origin left</div>
- <div id="float-origin-right" class="box">Float origin right</div>
+ <h2>Float</h2>
+ <div id="float-origin-left" class="box">Float origin left</div>
+ <div id="float-origin-right" class="box">Float origin right</div>
- <h2>Clear</h2>
- <div id="clear-origin-left" class="box">Clear origin left</div>
- <div id="clear-origin-right" class="box">Clear origin right</div>
+ <h2>Clear</h2>
+ <div id="clear-origin-left" class="box">Clear origin left</div>
+ <div id="clear-origin-right" class="box">Clear origin right</div>
- <h2>Left/Right</h2>
+ <h2>Left/Right</h2>
- <h2>Margin</h2>
+ <h2>Margin</h2>
- <h2>Padding</h2>
+ <h2>Padding</h2>
- <h2>Text-align</h2>
+ <h2>Text-align</h2>
- <h2>Text-indent</h2>
- </div>
+ <h2>Text-indent</h2>
+ </div>
</body>
</html>
View
143 sass/_core.scss
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
margin: 0;
padding: 0;
}
@@ -19,143 +20,3 @@ h1 {
position: relative;
}
-
-
-/* background */
-#background-position {
- @include background-position(8px 100px);
-}
-#background-position-left {
- @include background-position(left 100px);
-}
-#background-position-right {
- @include background-position(right 100px);
-}
-#background-position-center {
- @include background-position(center 100px);
-}
-
-#background-5-left {
- @include background(#FFF url(img.ext) no-repeat left center);
-}
-#background-4-left {
- @include background(url(img.ext) no-repeat left center);
-}
-#background-5-right {
- @include background(#FFF url(img.ext) no-repeat right center);
-}
-#background-4-right {
- @include background(url(img.ext) no-repeat right center);
-}
-#background-5-center {
- @include background(#FFF url(img.ext) no-repeat center center);
-}
-#background-4-center {
- @include background(url(img.ext) no-repeat center center);
-}
-#background-5 {
- @include background(#FFF url(img.ext) no-repeat 8px center);
-}
-#background-4 {
- @include background(url(img.ext) no-repeat 8px center);
-}
-
-
-/* border */
-#border-left {
- @include border-left(1px solid #FFF);
-}
-#border-right {
- @include border-right(1px solid #FFF);
-}
-
-
-/* border-radius */
-#border-top-left-radius {
- @include border-top-left-radius(2px);
-}
-#border-top-right-radius {
- @include border-top-right-radius(2px);
-}
-#border-bottom-left-radius {
- @include border-bottom-left-radius(2px);
-}
-#border-bottom-right-radius {
- @include border-bottom-right-radius(2px);
-}
-
-
-/* clear */
-#clear-origin-left {
- @include float(left);
- @include clear(left);
-}
-#clear-origin-right {
- @include float(right);
- @include clear(right);
-}
-
-
-/* direction */
-#direction {
- @include direction;
-}
-
-
-/* float */
-#float-origin-left {
- @include float(left);
-}
-#float-origin-right {
- @include float(right);
-}
-
-
-/* position */
-#left {
- @include left(8px);
-}
-#right {
- @include right(8px);
-}
-
-
-/* margin */
-#margin-left {
- @include margin-left(8px);
-}
-#margin-right {
- @include margin-right(8px);
-}
-
-
-/* padding */
-#padding-left {
- @include padding-left(8px);
-}
-#padding-right {
- @include padding-right(8px);
-}
-
-
-/* text */
-#text-align-left {
- @include text-align(left);
-}
-#text-align-right {
- @include text-align(right);
-}
-#text-indent {
- @include text-indent(8px);
-}
-
-
-/* 4 value swaps */
-#lrswap {
- @include lrswap(padding, 0px 8px 16px 24px);
- @include lrswap(margin, 0px 8px 16px 24px);
-}
-#lrswap2 {
- @include lrswap2(padding, 0px, 8px, 16px, 24px);
- @include lrswap2(margin, 0px, 8px, 16px, 24px);
-}
View
346 sass/_helpers.scss
@@ -1,118 +1,89 @@
// RTL-SASS
// http://jalproductions.co.uk
-// $val is the value of the property
+$rtl: false !default;
+
+// $value is the value of the property
// $origin is the original position of the element
// (5) e.g. background: #FFF url(img.ext) no-repeat left center;
// (4) e.g. background: url(img.ext) no-repeat left center;
-@mixin background($val) {
+// TODO Refactor or abandon this notation, because the background property
+// has lots of different possible syntaxes (gradients, images, order of arguments…)
+@mixin background($value) {
@if $rtl == true {
- @if length($val) == 5 {
- @if nth($val, 4) == left {
- background: nth($val, 1) nth($val, 2) nth($val, 3) right nth($val, 5);
- } @else if nth($val, 4) == right {
- background: nth($val, 1) nth($val, 2) nth($val, 3) left nth($val, 5);
- } @else if nth($val, 4) == center {
- background: nth($val, 1) nth($val, 2) nth($val, 3) center nth($val, 5);
+ @if length($value) == 5 {
+ @if nth($value, 4) == left {
+ background: nth($value, 1) nth($value, 2) nth($value, 3) right nth($value, 5);
+ } @else if nth($value, 4) == right {
+ background: nth($value, 1) nth($value, 2) nth($value, 3) left nth($value, 5);
+ } @else if nth($value, 4) == center {
+ background: nth($value, 1) nth($value, 2) nth($value, 3) center nth($value, 5);
} @else {
- background: nth($val, 1) nth($val, 2) nth($val, 3) nth($val, 4) * -1 nth($val, 5);
+ background: nth($value, 1) nth($value, 2) nth($value, 3) nth($value, 4) * -1 nth($value, 5);
}
- } @else if length($val) == 4 {
- @if nth($val, 3) == left {
- background: nth($val, 1) nth($val, 2) right nth($val, 4);
- } @else if nth($val, 3) == right {
- background: nth($val, 1) nth($val, 2) left nth($val, 4);
- } @else if nth($val, 3) == center {
- background: nth($val, 1) nth($val, 2) center nth($val, 4);
+ } @else if length($value) == 4 {
+ @if nth($value, 3) == left {
+ background: nth($value, 1) nth($value, 2) right nth($value, 4);
+ } @else if nth($value, 3) == right {
+ background: nth($value, 1) nth($value, 2) left nth($value, 4);
+ } @else if nth($value, 3) == center {
+ background: nth($value, 1) nth($value, 2) center nth($value, 4);
} @else {
- background: nth($val, 1) nth($val, 2) nth($val, 3) * -1 nth($val, 4);
+ background: nth($value, 1) nth($value, 2) nth($value, 3) * -1 nth($value, 4);
}
} @else {
- background: $val;
+ background: $value;
}
} @else {
- background: $val;
+ background: $value;
}
}
// Note: Don't use this for sprite images!
// Actually not quite sure what this *would* be used for...
// But hey-ho, it's here anyway!
-@mixin background-position($val) {
+@mixin background-position($value) {
@if $rtl {
- @if nth($val, 1) == left {
- background-position: right nth($val, 2);
- } @else if nth($val, 1) == right {
- background-position: left nth($val, 2);
- } @else if nth($val, 1) == center {
- background-position: center nth($val, 2);
+ @if nth($value, 1) == left {
+ background-position: right nth($value, 2);
+ } @else if nth($value, 1) == right {
+ background-position: left nth($value, 2);
+ } @else if nth($value, 1) == center {
+ background-position: center nth($value, 2);
} @else {
- background-position: nth($val, 1) * -1 nth($val, 2);
+ background-position: nth($value, 1) * -1 nth($value, 2);
}
} @else {
- background-position: nth($val, 1) nth($val, 2);
- }
-}
-
-@mixin border-left($val) {
- @if $rtl {
- border-right: $val;
- } @else {
- border-left: $val;
- }
-}
-@mixin border-right($val) {
- @if $rtl {
- border-left: $val;
- } @else {
- border-right: $val;
+ background-position: nth($value, 1) nth($value, 2);
}
}
-@mixin border-bottom-left-radius($val) {
- @if $rtl {
- border-bottom-right-radius: $val;
- } @else {
- border-bottom-left-radius: $val;
- }
+@mixin border-bottom-left-radius($value) {
+ @if $rtl { border-bottom-right-radius: $value; }
+ @else { border-bottom-left-radius: $value; }
}
-@mixin border-bottom-right-radius($val) {
- @if $rtl {
- border-bottom-left-radius: $val;
- } @else {
- border-bottom-right-radius: $val;
- }
+@mixin border-bottom-right-radius($value) {
+ @if $rtl { border-bottom-left-radius: $value; }
+ @else { border-bottom-right-radius: $value; }
}
-@mixin border-top-left-radius($val) {
- @if $rtl {
- border-top-right-radius: $val;
- } @else {
- border-top-left-radius: $val;
- }
+@mixin border-top-left-radius($value) {
+ @if $rtl { border-top-right-radius: $value; }
+ @else { border-top-left-radius: $value; }
}
-@mixin border-top-right-radius($val) {
- @if $rtl {
- border-top-left-radius: $val;
- } @else {
- border-top-right-radius: $val;
- }
+@mixin border-top-right-radius($value) {
+ @if $rtl { border-top-left-radius: $value; }
+ @else { border-top-right-radius: $value; }
}
@mixin clear($origin: left) {
@if $origin == left {
- @if $rtl {
- clear: right;
- } @else {
- clear: left;
- }
+ @if $rtl { clear: right; }
+ @else { clear: left; }
} @else {
- @if $rtl {
- clear: left;
- } @else {
- clear: right;
- }
+ @if $rtl { clear: left; }
+ @else { clear: right; }
}
}
@@ -126,171 +97,136 @@
@mixin float($origin: left) {
@if $origin == left {
- @if $rtl {
- float: right;
- } @else {
- float: left;
- }
+ @if $rtl { float: right; }
+ @else { float: left; }
} @else {
- @if $rtl {
- float: left;
- } @else {
- float: right;
- }
+ @if $rtl { float: left; }
+ @else { float: right; }
}
}
-@mixin left($val) {
- @if $rtl {
- right: $val;
- } @else {
- left: $val;
- }
-}
-@mixin right($val) {
- @if $rtl {
- left: $val;
+@mixin text-align($origin: left) {
+ @if $origin == left {
+ @if $rtl { text-align: right; }
+ @else { text-align: left; }
} @else {
- right: $val;
+ @if $rtl { text-align: left; }
+ @else { text-align: right; }
}
}
-@mixin margin-left($val) {
- @if $rtl {
- margin-right: $val;
- } @else {
- margin-left: $val;
- }
-}
-@mixin margin-right($val) {
- @if $rtl {
- margin-left: $val;
- } @else {
- margin-right: $val;
- }
+@mixin text-indent($value) {
+ @if $rtl { text-indent: $value * -1; }
+ @else { text-indent: $value; }
}
-@mixin padding-left($val) {
- @if $rtl {
- padding-right: $val;
- } @else {
- padding-left: $val;
- }
-}
-@mixin padding-right($val) {
- @if $rtl {
- padding-left: $val;
- } @else {
- padding-right: $val;
- }
-}
-
-@mixin text-align($origin: left) {
- @if $origin == left {
- @if $rtl {
- text-align: right;
- } @else {
- text-align: left;
- }
- } @else {
- @if $rtl {
- text-align: left;
- } @else {
- text-align: right;
- }
- }
-}
-@mixin text-indent($val) {
+// Swap property values when in rtl
+// In: 0 5px 8px 12px
+// Out: 0 12px 8px 5px (in rtl)
+@function swap-left-right($values) {
@if $rtl {
- text-indent: $val * -1;
+ @return nth($values, 1) nth($values, 4) nth($values, 3) nth($values, 2);
} @else {
- text-indent: $val;
+ @return $values;
}
}
// For selectors which have 4 values (e.g. padding, margin)
-@mixin lrswap($property, $value) {
- @if length($value) < 4 or $rtl == false {
- #{$property}: $value;
- } @else {
- @if $rtl {
- #{$property}: nth($value, 1) nth($value, 4) nth($value, 3) nth($value, 2);
- }
- }
-}
-
-//Another method to do the same thing as above
-@mixin lrswap2($property, $t, $r, $d, $l) {
- @if $rtl {
- #{$property}: $t $l $d $r;
+@mixin lrswap($property, $values) {
+ @if length($values) == 4 {
+ #{$property}: swap-left-right($values);
} @else {
- #{$property}: $t $r $d $l;
+ #{$property}: $values;
}
}
-// These include the original position within one mixin
-@mixin borderlr($val, $origin: left) {
+// ==========
+// = Border =
+// ==========
+@mixin borderlr($value, $origin: left) {
@if $origin == left {
- @if $rtl {
- border-left: $val;
- } @else {
- border-right: $val;
- }
+ @if $rtl { border-right: $value; }
+ @else { border-left: $value; }
} @else {
- @if $rtl {
- border-right: $val;
- } @else {
- border-left: $val;
- }
+ @if $rtl { border-left: $value; }
+ @else { border-right: $value; }
}
}
+// Shorthands
+@mixin border-width($values) {
+ @include lrswap(border-width, $values);
+}
+@mixin border-left($value) {
+ @include borderlr($value, left);
+}
+@mixin border-right($value) {
+ @include borderlr($value, right);
+}
-@mixin marginlr($val, $origin: left) {
+// ==========
+// = Margin =
+// ==========
+@mixin marginlr($value, $origin: left) {
@if $origin == left {
- @if $rtl {
- margin-left: $val;
- } @else {
- margin-right: $val;
- }
+ @if $rtl { margin-right: $value; }
+ @else { margin-left: $value; }
} @else {
- @if $rtl {
- margin-right: $val;
- } @else {
- margin-left: $val;
- }
+ @if $rtl { margin-left: $value; }
+ @else { margin-right: $value; }
}
}
+// Shorthands
+@mixin margin($values) {
+ @include lrswap(margin, $values);
+}
+@mixin margin-left($value) {
+ @include marginlr($value, left);
+}
+@mixin margin-right($value) {
+ @include marginlr($value, right);
+}
-@mixin paddinglr($val, $origin: left) {
+// ===========
+// = Padding =
+// ===========
+@mixin paddinglr($value, $origin: left) {
@if $origin == left {
- @if $rtl {
- padding-left: $val;
- } @else {
- padding-right: $val;
- }
+ @if $rtl { padding-right: $value; }
+ @else { padding-left: $value; }
} @else {
- @if $rtl {
- padding-right: $val;
- } @else {
- padding-left: $val;
- }
+ @if $rtl { padding-left: $value; }
+ @else { padding-right: $value; }
}
}
+// Shorthands
+@mixin padding($values) {
+ @include lrswap(padding, $values);
+}
+@mixin padding-left($value) {
+ @include paddinglr($value, left);
+}
+@mixin padding-right($value) {
+ @include paddinglr($value, right);
+}
-@mixin position-h($val, $origin: left) {
+// ===========================
+// = Left/right positionning =
+// ===========================
+@mixin position-h($value, $origin: left) {
@if $origin == left {
- @if $rtl {
- right: $val;
- } @else {
- left: $val;
- }
+ @if $rtl { right: $value; }
+ @else { left: $value; }
} @else {
- @if $rtl {
- left: $val;
- } @else {
- right: $val;
- }
+ @if $rtl { left: $value; }
+ @else { right: $value; }
}
+}
+// Shorthands
+@mixin left($value) {
+ @include position-h($value, left);
+}
+@mixin right($value) {
+ @include position-h($value, right);
}
View
146 sass/_test.scss
@@ -0,0 +1,146 @@
+/* ==========
+ * = Testing
+ * ========== */
+
+/* background */
+#background-position {
+ @include background-position(8px 100px);
+}
+#background-position-left {
+ @include background-position(left 100px);
+}
+#background-position-right {
+ @include background-position(right 100px);
+}
+#background-position-center {
+ @include background-position(center 100px);
+}
+
+#background-5-left {
+ @include background(#FFF url(img.ext) no-repeat left center);
+}
+#background-4-left {
+ @include background(url(img.ext) no-repeat left center);
+}
+#background-5-right {
+ @include background(#FFF url(img.ext) no-repeat right center);
+}
+#background-4-right {
+ @include background(url(img.ext) no-repeat right center);
+}
+#background-5-center {
+ @include background(#FFF url(img.ext) no-repeat center center);
+}
+#background-4-center {
+ @include background(url(img.ext) no-repeat center center);
+}
+#background-5 {
+ @include background(#FFF url(img.ext) no-repeat 8px center);
+}
+#background-4 {
+ @include background(url(img.ext) no-repeat 8px center);
+}
+
+
+/* border */
+#border-left {
+ @include border-left(1px solid #FFF);
+}
+#border-right {
+ @include border-right(1px solid #FFF);
+}
+
+
+/* border-radius */
+#border-top-left-radius {
+ @include border-top-left-radius(2px);
+}
+#border-top-right-radius {
+ @include border-top-right-radius(2px);
+}
+#border-bottom-left-radius {
+ @include border-bottom-left-radius(2px);
+}
+#border-bottom-right-radius {
+ @include border-bottom-right-radius(2px);
+}
+
+
+/* clear */
+#clear-origin-left {
+ @include float(left);
+ @include clear(left);
+}
+#clear-origin-right {
+ @include float(right);
+ @include clear(right);
+}
+
+
+/* direction */
+#direction {
+ @include direction;
+}
+
+
+/* float */
+#float-origin-left {
+ @include float(left);
+}
+#float-origin-right {
+ @include float(right);
+}
+
+
+/* position */
+#left {
+ @include left(8px);
+}
+#right {
+ @include right(8px);
+}
+
+
+/* margin */
+#margin-left {
+ @include margin-left(8px);
+}
+#margin-right {
+ @include margin-right(8px);
+}
+
+
+/* padding */
+#padding-0-8px-16px-24px {
+ @include padding(0 8px 16px 24px);
+}
+#padding-left {
+ @include padding-left(8px);
+}
+#padding-right {
+ @include padding-right(8px);
+}
+
+
+/* text */
+#text-align-left {
+ @include text-align(left);
+}
+#text-align-right {
+ @include text-align(right);
+}
+#text-indent {
+ @include text-indent(8px);
+}
+
+
+/* 4 value swaps */
+#lrswap-0-8px-16px-24px {
+ /* Should return the same 2 values: */
+ @include lrswap(padding, 0 8px 16px 24px);
+ @include padding(0 8px 16px 24px);
+
+ /* Should return the same 2 values: */
+ @include lrswap(margin, 0 8px 16px 24px);
+ @include margin(0 8px 16px 24px);
+}
View
5 sass/ltr.scss
@@ -1,3 +1,4 @@
$rtl: false;
-@import "_helpers";
-@import "core.scss";
+@import "helpers",
+ "core",
+ "test";
View
6 sass/rtl.scss
@@ -1,3 +1,5 @@
$rtl: true;
-@import "_helpers";
-@import "core.scss";
+/*! Values should be inverted (left/right…) */
+@import "helpers",
+ "core",
+ "test";

0 comments on commit e6f25ad

Please sign in to comment.
Something went wrong with that request. Please try again.