Read more

Remove quotes from Sass mixin arguments

Arne Hartherz
March 10, 2011Software engineer at makandra GmbH

When calling a Sass mixins, you usually don't need to quote arguments:

+tint_article(#f21)
Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

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 11:52)