Permalink
Browse files

Changed to nested mixins for LESS 1.2.11.

  • Loading branch information...
1 parent cff88c5 commit 8dcaa84ff2d5eea95e60c6ba0fb82a6840e7d50f @xdissent committed Oct 12, 2009
Showing with 68 additions and 72 deletions.
  1. +8 −12 demo/demo.css
  2. +9 −8 demo/demo.less
  3. +1 −4 demo/index.html
  4. +50 −48 src/grid.less
View
@@ -147,12 +147,6 @@ p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margi
width: 940px;
}
#wrapper #header #logo {
- display: inline;
- float: left;
- position: relative;
- margin-left: 10px;
- margin-right: 10px;
- width: 940px;
margin-left: 0;
margin-right: 0;
font-weight: bold;
@@ -161,33 +155,35 @@ p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margi
font-weight: normal;
font-family: Georgia;
margin-bottom: 0;
+ display: inline;
+ float: left;
+ position: relative;
+ width: 940px;
}
#wrapper #header #tagline {
+ margin-left: 0;
+ margin-right: 0;
display: inline;
float: left;
position: relative;
- margin-left: 10px;
- margin-right: 10px;
width: 760px;
padding-left: 180px;
- margin-left: 0;
- margin-right: 0;
}
#wrapper #sidebar {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
- width: 280px;
+ width: 220px;
}
#wrapper #content {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
- width: 640px;
+ width: 700px;
}
#wrapper #footer {
display: inline;
View
@@ -13,38 +13,39 @@
@import url(../src/grid.less);
#wrapper {
- .grid-container(16 );
+ .grid-container;
#header {
- .grid(16 );
+ .grid(16);
#logo {
- .grid(16 );
+ .grid(16);
.alpha;
.omega;
.gargantuan;
+
font-weight: normal;
font-family: Georgia;
margin-bottom: 0;
}
#tagline {
- .grid(13 );
- .prefix(3 );
+ .grid(13);
+ .prefix(3);
.alpha;
.omega;
}
}
#sidebar {
- .grid(5 );
+ .grid(4);
}
#content {
- .grid(11 );
+ .grid(12);
}
#footer {
- .grid(16 );
+ .grid(16);
}
}
View
@@ -15,7 +15,6 @@
<p id="tagline">The LESS Grid System</p>
</div>
- <div id="main">
<div id="sidebar">
<h3>Grid LESS Links</h3>
@@ -63,9 +62,7 @@
</li>
</ul>
</div>
-
- <div class="clear"></div>
- </div>
+
<div id="footer">
<p>&copy; 2009 Greg Thornton</p>
View
@@ -11,68 +11,70 @@
@import url(text.less);
/**
- * This is to prevent errors.
- */
-@grid-column-width: 10;
-
-/**
* Create a grid container.
*/
-.grid-container(@grid-container-columns:12, @grid-container-width: 960px, @grid-column-margin: 10px) {
- width: @grid-container-width;
+.grid-container(@columns:16, @width: 960px, @margin: 10px) {
+ width: @width;
margin-right: auto;
margin-left: auto;
/**
* Variable passed to child grids.
*/
- @grid-column-width: @grid-container-width / @grid-container-columns;
-}
-
-/**
- * Create a grid.
- */
-.grid(@grid-columns: 0) {
-
+ @column-width: @width / @columns;
+
/**
- * Styles
+ * Create a grid.
*/
- display: inline;
- float: left;
- position: relative;
- margin-left: @grid-column-margin;
- margin-right: @grid-column-margin;
- width: @grid-column-width * @grid-columns - 2 * @grid-column-margin;
-}
-
-/**
- * Add empty columns to the left.
- */
-.prefix(@grid-prefix-columns: 0) {
- padding-left: @grid-column-width * @grid-prefix-columns;
-}
-
-/**
- * Add empty columns to the right.
- */
-.suffix(@grid-suffix-columns: 0) {
- padding-right: @grid-column-width * @grid-suffix-columns;
-}
-
-/**
- * Pull grid to the left.
- */
-.pull(@grid-pull-columns: 0) {
- left: 0 - @grid-column-width * @grid-pull-columns;
+ .grid(@grid-columns: 0) {
+
+ /**
+ * Styles
+ */
+ display: inline;
+ float: left;
+ position: relative;
+ margin-left: @margin;
+ margin-right: @margin;
+ width: @grid-columns * @column-width - 2 * @margin;
+ }
+
+ /**
+ * Add empty columns to the left.
+ */
+ .prefix(@prefix: 0) {
+ padding-left: @column-width * @prefix;
+ }
+
+ /**
+ * Add empty columns to the right.
+ */
+ .suffix(@suffix: 0) {
+ padding-right: @column-width * @suffix;
+ }
+
+ /**
+ * Pull grid to the left.
+ */
+ .pull(@pull: 0) {
+ left: 0 - @column-width * @pull;
+ }
+
+ /**
+ * Push grid to the right.
+ */
+ .push(@push: 0) {
+ left: @column-width * @push;
+ }
}
/**
- * Push grid to the right.
+ * The following 2 mixins would ideally be defined inside the .grid-container
+ * mixin since it isn't relevant in any other scope. There is a bug in LESS
+ * that makes it impossible to nest mixins that don't take arguments so they
+ * are defined globally for now.
*/
-.push(@grid-push-columns: 0) {
- left: @grid-column-width * @grid-push-columns;
-}
-
+
/**
* The first grid inside another grid.
*/

0 comments on commit 8dcaa84

Please sign in to comment.