Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The ampersand
/* scss */
#nav {
li a {
color: maroon;
body.admin & { border-bottom: dotted 1px maroon; } // <-- Awesome-sauce right there
&:hover {
color: purple;
}
}
}
/* output */
#nav li a { color: maroon; }
body.admin #nav li a { border-bottom: dotted 1px maroon; }
#nav li a:hover { color: purple; }
/* scss */
#nav {
li a {
color: maroon;
&:hover {
color: purple;
}
}
}
body.admin #nav li a { border-bottom: dotted 1px maroon; }
/* output */
#nav li a { color: maroon; }
#nav li a:hover { color: purple; }
body.admin #nav li a { border-bottom: dotted 1px maroon; }
/* scss */
#nav {
li a {
color: maroon;
&:hover {
color: purple;
}
}
}
/* output */
#nav li a { color: maroon; }
#nav li a:hover { color: purple; }
/* scss */
@mixin quicksandlight() {
visibility: hidden;
.wf-active &, .msie.wf-loading &, .msie.wf-inactive & {
visibility:visible;
font-family: 'QuicksandLight', Arial, sans-serif;
}
}
#sample span { @include quicksandlight; }
/* output */
#sample span { visibility: hidden; }
.wf-active #sample span,
.msie.wf-loading #sample span,
.msie.wf-inactive #sample span {
visibility: visible;
font-family: 'QuicksandLight', Arial, sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment