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 online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
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)