Protip: You can debug in Sass with something like: .row:before{content:"#{$height}"}
A Pen by Chris Nager on CodePen.
Protip: You can debug in Sass with something like: .row:before{content:"#{$height}"}
A Pen by Chris Nager on CodePen.
- 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; | |
} | |
} |