| // HTML | |
| <body id="dark"> | |
| <div class="rotate"> | |
| <a href="#light" class="light"></a> | |
| <a href="#dark" class="dark"></a> | |
| </div> | |
| </body> | |
| // Sass v3.2.3 | |
| %foo { | |
| color: red; | |
| @media context_1 { | |
| color: green; | |
| } | |
| } | |
| @media context_1 { |
| // Sass v3.2.3 | |
| // Compass v0.12.2 | |
| @import "compass"; | |
| // your function to do whatever | |
| @function add-px($n) { | |
| @return $n * 1px; | |
| } |
| @mixin grid-output($method) { | |
| // default output methods | |
| @if $method == float { | |
| float: left; | |
| // float styles. | |
| } | |
| @if $method == isolation { | |
| float: left; | |
| // float styles. | |
| } |
| // Sass v3.2.7 | |
| // Breakpoint v1.3 | |
| @import "breakpoint"; | |
| @function color() { | |
| $context: breakpoint-get-context(min-width); | |
| @if $context == 550px { | |
| @return blue; | |
| } |
| // --- | |
| // Singularity.gs (v1.0.5) | |
| // Sass (v3.2.7) | |
| // --- | |
| $grids: 12; | |
| $gutters: 1/3; | |
| div { |
| @function opacify($color, $bg: white) { | |
| @return mix($color, $bg); | |
| } | |
| foo { | |
| color: opacify(red); | |
| } |
Where style.scss looks like this:
@import "partial-1";
| =bigger | |
| font-size: bigger | |
| %button | |
| baz: boo | |
| div | |
| stuff: stuff |