Skip to content

Instantly share code, notes, and snippets.

@jrencz

jrencz/SassMeister-input.scss

Last active September 15, 2016 10:32
Show Gist options
  • Save jrencz/66aff7d3c0395baac3e591d4ebdd0f60 to your computer and use it in GitHub Desktop.
Save jrencz/66aff7d3c0395baac3e591d4ebdd0f60 to your computer and use it in GitHub Desktop.
Download ZIP
variable interpolations in Sass
Raw
input.scss
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
$color-rebeccapurple: rebeccapurple;
$color-red: red;
$color-blue: blue;
@mixin color(
$color: $color-red,
$color-hover: $color
) {
color: $color;
&:hover {
color: $color-hover;
}
}
b {
}
a {
@include color;
&.blue {
@include color($color: $color-blue);
}
&.different-hover {
@include color($color: $color-blue, $color-hover: $color-rebeccapurple);
}
}
Raw
output.css
a {
color: red;
}
a:hover {
color: red;
}
a.blue {
color: blue;
}
a.blue:hover {
color: blue;
}
a.different-hover {
color: blue;
}
a.different-hover:hover {
color: rebeccapurple;
}
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
$color-rebeccapurple: rebeccapurple;
$color-red: red;
$color-blue: blue;
@mixin color(
$color: $color-red,
$color-hover: $color
) {
color: $color;
&:hover {
color: $color-hover;
}
}
b {
}
a {
@include color;
&.blue {
@include color($color: $color-blue);
}
&.different-hover {
@include color($color: $color-blue, $color-hover: $color-rebeccapurple);
}
}
Raw
SassMeister-output.css
a {
color: red;
}
a:hover {
color: red;
}
a.blue {
color: blue;
}
a.blue:hover {
color: blue;
}
a.different-hover {
color: blue;
}
a.different-hover:hover {
color: rebeccapurple;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment