For this tutorial I'm assuming you are already comfortable with CSS, Sass (I'll use the SCSS syntax) and Compass. Please get set up with each one of those before attempting to use Susy. Sass and Compass both have their own setup instructions and tutorials that you can use.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.0) | |
// Compass (v1.0.0) | |
// SassyJSON (v1.1.8) | |
// ---- | |
@import "SassyJSON"; | |
@mixin eq($add) { | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// --- | |
// Sass (v3.2.9) | |
// --- | |
#foo { | |
$width: 100px; | |
width: $width; | |
background-position: ($width - 20px) center; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin do_layout() { | |
//stuff for a middle layout | |
} | |
@media only screen and (min-width: 768px) { | |
@include do_layout(); | |
} | |
body.ie { | |
@include do_layout(); |