In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.
See the official Susy site for 1.0 documentation.
| @mixin ie6 { * html & { @content } } | |
| #logo { | |
| background-image: url("/images/logo.png"); | |
| @include ie6 { background-image: url("/images/logo.gif"); } | |
| } |
| // How I would approach a fluid grid: | |
| // | |
| // [1] Let the name reflect the % width, | |
| // eliminating "1 of 12" guesswork. | |
| // | |
| // [2] Also, put 10px of padding to either | |
| // side, to stack and make a 20px gutter. | |
| // | |
| // [3] Make the box-sizing = border-box, so that | |
| // 50% + 20px total side padding = 50%, etc. |
| <?php | |
| function swap(array &$array, $k1, $k2) { | |
| $temp = $array[$k1]; | |
| $array[$k1] = $array[$k2]; | |
| $array[$k2] = $temp; | |
| } | |
| function partition(array &$array, $left, $right, $pivot) { | |
| $pValue = $array[$pivot]; |
| // ---------------------------------------------- | |
| // I want to define the important layout settings | |
| // $columns: <integer> | <list>; | |
| $columns: 12; | |
| // $gutters: <ratio>; | |
| $gutters: .25; | |
| // $column-width: auto | <length>; |
| // We're going to use Breakpoint to handle our media queries | |
| // http://github.com/team-sass/breakpoint | |
| @import "breakpoint"; | |
| @mixin element-query($sizes...) { | |
| @each $size in $sizes { | |
| @include breakpoint(nth($size, 2)) { | |
| #{nth($size, 1)} & { | |
| @content; | |
| } |
Below is a collection of my favourite responses I gathered from Guardian engineers when asked the question: What have you learnt starting from scratch and building a mobile-first next generation web platform for the Guardian?