When calling a Sass mixins, you usually don't need to quote arguments:
+tint_article(#f21)
However, when a CSS property consists of multiple parts (like background or box-shadow), the Sass parser will trip up:
+box_shadow(0 1px 2px #000) // this will blow up
The solution is to quote the argument like this:
+box_shadow('0 1px 2px #000')
As the author of the box-shadow mixin you now need to unquote this string, so the quotes don't appear in the resulting CSS. E.g. the following version of the box-shadow mixin will generate broken CSS:
# Sass
=box_shadow($settings)
-webkit-box-shadow: $settings
box-shadow: $settings
input
+box_shadow('0 1px 2px #000')
# Resulting CSS
input {
-webkit-box-shadow: "0 1px 2px #000"
box-shadow: "0 1px 2px #000"
}
Browsers will usually ignore the quoted styles, so no box shadows for you.
To avoid this, use
unquote
Show archive.org snapshot
:
# Sass
=box_shadow($settings)
$settings: unquote($settings)
-webkit-box-shadow: $settings
box-shadow: $settings
input
+box_shadow('0 1px 2px #000')
# Resulting CSS
input {
-webkit-box-shadow: 0 1px 2px #000
box-shadow: 0 1px 2px #000
}
Posted by Arne Hartherz to makandra dev (2011-03-10 10:52)