-
-
Save chriseppstein/262126 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
=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 |
This file contains hidden or 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
/* 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; | |
} | |
} | |
} |
This file contains hidden or 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
/* 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