Skip to content

Instantly share code, notes, and snippets.

@nladart
Created September 12, 2013 09:47
Show Gist options
  • Save nladart/6535134 to your computer and use it in GitHub Desktop.
Save nladart/6535134 to your computer and use it in GitHub Desktop.
A Pen by Chris Nager.

Golden Ratio

Protip: You can debug in Sass with something like: .row:before{content:"#{$height}"}

A Pen by Chris Nager on CodePen.

License.

- 10.times do
.row
@import "compass";
$height: 50px;
$golden-ratio: 1.61803398875;
$background-color: gold;
.row {
height: $height;
text-align: center;
background-color: $background-color;
}
// Debug
.row:before {
content: "#{$height}";
line-height: $height;
color: white;
}
@for $i from 2 through 10 {
.row:nth-child(#{$i}) {
$height: $height * $golden-ratio;
height: $height;
$background-color: darken($background-color, 5%);
background-color: $background-color;
}
// Debug
.row:nth-child(#{$i}):before {
content: "#{$height}";
line-height: $height;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment