Posted almost 9 years ago. Visible to the public.

Remove quotes from Sass mixin arguments

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


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:

# 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 }
Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Arne Hartherz
Last edit:
about 7 years ago
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more