Skip to content

Instantly share code, notes, and snippets.

@hail2u
Created February 11, 2014 23:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hail2u/8946437 to your computer and use it in GitHub Desktop.
Save hail2u/8946437 to your computer and use it in GitHub Desktop.
Define Sass variables with BEM using map.
$searchbox: (
input: (
fg: black,
bg: white,
border: lighten(black, 25%);
--focus: (
border: cyan,
)
);
button: (
fg: white,
bg: grayscale(mix(cyan, white, 60%)),
--hover: (
bg: cyan
)
)
);
.searchbox {
input {
$input: map-get($searchbox, input);
border: 1px solid map-get($input, border);
color: map-get($input, fg);
background-color: map-get($input, bg);
&:focus {
$input--focus: map-get($input, --focus);
border-color: map-get($input--focus, border);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment