Search code examples
compass-sasssusy-compass

Using a SASS variable as a value for CSS `content` property

Hi!

This might be caused by my lack of understanding of SASS/Compass.

I'm trying to output grid width with the following SASS code:

$total-columns        : 4
$column-width         : 4em                 // each column is 4em wide
$gutter-width         : $column-width / 2   // 1em gutters between columns
$grid-padding         : $gutter-width / 2   // grid-padding equal to gutters

#page
  +container
  +susy-grid-background

  #block-block-3
    div.content
      p:first-of-type:after
        content: columns-width()

Nothing is printed into block 3. :(

I also tried content: columns-width($total-columns), still nothing. If i do content: "foo", "foo" does get printed.

What am i doing wrong? How do i see susy-calculated grid width? Also, can it be printed in compass watch output?

Solution

  • Ok, the solution is using interpolation:

    content: "#{columns-width($total-columns)}"