1
.parent {
.row;
}
.parent {
.row;
height: 120px;
}
.parent {
.row(@x: @center; @y: @center;);
height: 120px;
}
.parent {
.row(@x: @spread);
height: 200px;
.naughty {
.naughty(row; @y: @bottom;);
}
}
.parent {
.column;
}
.parent {
.column(@x: @right; @y: @bottom;);
height: 250px;
}
.parent {
.column(@x: @center);
.naughty {
.naughty(column; @x: @left;);
}
}
2
Fiddle with the code and see the changes on the left.
Resize the browser window for smaller or larger screen effect.
3
Check what you've learned. Try to recreate the pattern given.
Stellar functions should be all you need.
Better use landscape mode if on mobile.
.container {
.row(@x: @value; @y: @value;); or
.column(@x: @value; @y: @value;);
}
.square {
.row(@x: @value; @y: @value;); or
.column(@x: @value; @y: @value;);
}
.container {
._____(@x: @center; @y: @center;);
}
.rect-1 {
._____(@y: @top;);
}
.rect-2 {
.column(@y: @value;);
}
.rect-3 {
._____(@y: @value;);
}
// There is more than one way to create this pattern.
.container {
._____(@x: @spread; @y: @center);
}
.square-1 {
.column; or .row;
}
.square-2 {
.naughty(._____; @y: @value;);
}
.square-3 {
.naughty(._____; @y: @value;);
.row(@x: @right; @y: @center;);
}