| // works | |
| =general_text_color | |
| color: #ccc | |
| p | |
| +general_text_color | |
| // doesn't work | |
| !general_text_color = #ccc |
Often in user interface design, there are cases where an element should have all of the properties of another element, and then possibly some unique properties unto itself.
The common approach to dealing with this has been to adjust the markup of a document such that the element has the qualities of both elements.
For instance, imagine if we have a design for a normal error and also for a serious error. We might write our markup like so:
| @import 'blueprint/grid' | |
| // | |
| requires compass gem | |
| usage: compass compile path/to/grid.sass -e production --output-style nested | |
| // | |
| defines Blueprint grid variables | |
| $blueprint-grid-columns: 24 | |
| $blueprint-grid-width: 30px | |
| $blueprint-grid-margin: 10px |
| @function values($values...) { | |
| @return { | |
| @for $value in $values { | |
| #{$value} | |
| } | |
| } | |
| } |
| #content | |
| .row | |
| .third | |
| .third | |
| .third.last | |
| .row | |
| .half | |
| .half.last | |
| .row | |
| .fourth |
| // Proposed syntax: !remaining applied to the last positional argument becomes a | |
| // comma list of any unbound positional arguments. | |
| @mixin multi-shadow($shadows !remaining){ | |
| -moz-box-shadow: $shadows; | |
| -webkit-box-shadow: $shadows; | |
| -o-box-shadow: $shadows; | |
| box-shadow: $shadows; | |
| } |
| @mixin some_sprite($state) { | |
| background-image: url(...); | |
| background-position: if($state is hover, 18px, 0px) 18px; | |
| } | |
| // somewhere down the line .......... | |
| .thingy { | |
| @include some_sprite(default); | |
| } |
| # Code below generates this error | |
| # undefined method `value' for "members/fenwick1.gif":String | |
| # for line ih = ... | |
| module ApplicationHelper | |
| def member_image_link(member) | |
| return if member.logo.blank? | |
| ih = image_height(Sass::Script::String.new(member.m_logo)) | |
| ihv = ih.length-2 |
| body > div { | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0px, rgba(0, 0, 0, 0)), color-stop(0px, rgba(0, 0, 0, 0.25)), color-stop(40px, rgba(0, 0, 0, 0)), color-stop(50px, rgba(0, 0, 0, 0)), color-stop(60px, rgba(0, 0, 0, 0.25)), color-stop(100px, rgba(0, 0, 0, 0)), color-stop(110px, rgba(0, 0, 0, 0)), color-stop(110px, rgba(0, 0, 0, 0.25)), color-stop(150px, rgba(0, 0, 0, 0)), color-stop(160px, rgba(0, 0, 0, 0)), color-stop(160px, rgba(0, 0, 0, 0.25)), color-stop(200px, rgba(0, 0, 0, 0)), color-stop(210px, rgba(0, 0, 0, 0)), color-stop(210px, rgba(0, 0, 0, 0.25)), color-stop(250px, rgba(0, 0, 0, 0)), color-stop(260px, rgba(0, 0, 0, 0)), color-stop(260px, rgba(0, 0, 0, 0.25)), color-stop(300px, rgba(0, 0, 0, 0)), color-stop(310px, rgba(0, 0, 0, 0)), color-stop(310px, rgba(0, 0, 0, 0.25)), color-stop(350px, rgba(0, 0, 0, 0)), color-s |
| // An example for: | |
| // http://blog.rebeltix.com/2011/04/css-sass-and-how-to-improve-the-mess/ | |
| @for $i from 1 through 6 { | |
| h#{$i} {font-size: 12pt + (14 - $i*2);} | |
| } | |
| @for $i from 1 through 3 { | |
| box-level-#{$i} {background-color: #333 + ($i * #333);} | |
| } |