Skip to content

Instantly share code, notes, and snippets.

@chriseppstein
Forked from nex3/example.sass
Created December 22, 2009 22:33
Show Gist options
  • Save chriseppstein/262126 to your computer and use it in GitHub Desktop.
Save chriseppstein/262126 to your computer and use it in GitHub Desktop.
=border(!width = 10px, !style = "solid", !color = blue)
border= !width !style !color
/* Using inline arguments */
.foo
+border(10px, "solid", green)
&:hover
+border(10px, "dashed", red)
/* Using Keyword arguments */
.bar
+border
!color: green
&:hover
+border
!style: dashed
!color: red
/* Note that the syntax here is pretty tentative */
@mixin border($width, $style, $color) {
@defaults {
$width: 10px;
$style: solid;
$color: blue;
}
border: $width $style $color;
}
/* using inline arguments */
.foo {
@include border(10px, solid, green);
&:hover {
@include border(10px, dashed, red);
}
}
/* using keyword arguments */
.bar {
@include border {
$color: green;
}
&:hover {
@include border {
$style: dashed;
$color: red;
}
}
}
/* Both of these files produce the same CSS. They're just different surface syntaxes for the same underlying document. */
.foo {
border: 10px solid green;
}
.foo:hover {
border: 10px dashed red;
}
.bar {
border: 10px solid green;
}
.bar:hover {
border: 10px dashed red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment