| div { | |
| width: 300px; | |
| padding: 10px; | |
| } | |
| input["text"] { | |
| width: 100%; | |
| padding: 5px 0; | |
| text-indent: 5px; | |
| } |
| @function scale($start, $length, $ratio) { | |
| $scales: ($start); | |
| @for $i from 1 through $length { | |
| $scales: append($scales, ceil((nth($scales, length($scales))) * $ratio)); | |
| } | |
| @return $scales; | |
| } |
| <div class=test> | |
| <p>this is a test block</p> | |
| </div> |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
def test
puts 'test'
| // ---- | |
| // Sass (v3.3.0.rc.1) | |
| // Compass (v0.13.alpha.10) | |
| // ---- | |
| // http://codepen.io/jlong/pen/wErcp | |
| @import "compass"; | |
| @include global-reset; |
| <p>Demo cribbed from <a href="http://viget.com/extend/sass-maps-are-awesome">viget.com/extend/sass-maps-are-awesome</a></p> | |
| <ol> | |
| <li><a href="#" class="profile-link--bandcamp profile-link">Bandcamp</a></li> | |
| <li><a href="#" class="profile-link--delicious profile-link">Delicious</a></li> | |
| <li><a href="#" class="profile-link--facebook profile-link">Facebook</a></li> | |
| <li><a href="#" class="profile-link--ficly profile-link">Ficly</a></li> | |
| <li><a href="#" class="profile-link--flickr profile-link">Flickr</a></li> | |
| <li><a href="#" class="profile-link--github profile-link">GitHub</a></li> | |
| <li><a href="#" class="profile-link--googleplus profile-link">Google+</a></li> |
| // ---- | |
| // Sass (v3.3.0.rc.1) | |
| // Compass (v0.13.alpha.10) | |
| // ---- | |
| @import "compass"; | |
| $brand-round: 0; | |
| @mixin e($name) { |
| .cf, .media { | |
| *zoom: 1; | |
| } | |
| .cf:after, .media:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .media { |
| <!-- @una made this --> | |
| <ul class="color-list"> | |
| <li class="color-box brick-red"></li> | |
| <li class="color-box strawberry"></li> | |
| <li class="color-box deep-orange"></li> | |
| <li class="color-box tangerine"></li> | |
| <li class="color-box gold"></li> | |
| <li class="color-box sunshine"></li> | |
| <li class="color-box grass-green"></li> |
| .block { | |
| color: red; | |
| } | |
| .block__element { | |
| color: green; | |
| } | |
| .block__element--modifier { | |
| color: blue; | |
| } |