Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
// vars
$darkBlue: #002c42;
$lightBlue: #1160a5;
// Essentially a function
@mixin colorBg($color: red) {
@if $color {
background: $color;
}
}
// Both classes are out in css
.foo { color: blue; }
.bar { @extend .foo; }
// Only .bar is output in css but our extend still applies
%foo { color: blue; }
.bar { @extend %foo; }
.button {
background: white;
color: black;
}
.nav__list {
// Pass a color to our mixin
@include colorBg($darkBlue);
&--button {
@extend .button;
&:hover {
background: $lightBlue;
}
// Large version of the button.
&--large {
// We want to inherit the hover styles here
@extend .nav__list--button;
padding: 20px;
}
}
}
.foo, .bar {
color: blue;
}
.bar {
color: blue;
}
.button, .nav__list--button, .nav__list--button--large {
background: white;
color: black;
}
.nav__list {
background: #002c42;
}
.nav__list--button:hover, .nav__list--button--large:hover {
background: #1160a5;
}
.nav__list--button--large {
padding: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.