Skip to content

Instantly share code, notes, and snippets.

@rupakg
Created April 27, 2011 09:15
Show Gist options
  • Save rupakg/943967 to your computer and use it in GitHub Desktop.
Save rupakg/943967 to your computer and use it in GitHub Desktop.
@import compass/css3
$color-light: #fff
$color-grey: #ddd
$color-dark: #000
//--------------------------------------------------------------------------------
// I started out like this, getting all
// carried away with how awesome Sass
// is, and how it allows nesting.
.foo
+linear-gradient(color-stops($color-light, $color-grey))
color: $color-dark
.bar
border:
width: 1px
style: solid
color: $color-dark
.baz
padding: 20px
&.blah
padding:
top: 10px
//--------------------------------------------------------------------------------
// But after awhile, that can become a
// maintenance nightmare. So I refactored
// the Sass code to look more akin to
// the actual compiled CSS it exports.
.foo
+linear-gradient(color-stops($color-light, $color-grey))
color: $color-dark
.foo .bar
border: 1px solid $color-dark
.foo .baz
padding: 20px
.foo .baz.blah
padding-top: 10px
//--------------------------------------------------------------------------------
// A little compromise...
.foo
+linear-gradient(color-stops($color-light, $color-grey))
color: $color-dark
.bar
border: 1px solid $color-dark
.baz
padding: 20px
&.blah
padding-top: 10px
//--------------------------------------------------------------------------------
// Both above examples basically are
// compiled down into CSS like this...
.foo {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
background-image: -moz-linear-gradient(top, #ffffff, #dddddd);
background-image: linear-gradient(top, #ffffff, #dddddd);
color: #000;
}
.foo .bar {
border: 1px solid #000;
}
.foo .baz {
padding: 20px;
}
.foo .baz.blah {
padding-top: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment