adding a % unit to a Variable in a for loop sass

Question

I try to create a flexiable Table grid which is inside a for loop Its works perfectly fine on PX based but I cant get the % added it gives me an error.

$fg-column: 20px;
$$fg-max-columns:41;

 width:(#{($fg-column /$fg-max-columns)}#{"%"}) * $i);

.table-grid-layout{
    &.is-fluid{
      @include fill-parent;
      @for $i from 1 through 41 {
        .column-#{$i} {
          width:(#{($fg-column /$fg-max-columns)}#{"%"}) * $i);
        }
      }
    }
    &.not-fluid{
      @include outer-container;
      @for $i from 1 through 41 {
        .column-#{$i} {
            width: 20px * $i;
        }
      }
    }

}

score 3 · Answer 1 · answered Jan 28 '14 at 09:35

Simply adding a percentage sign as a string to the pixel value will not achieve the result you are after. If you want to get the percentage value, you need to divide the number of columns for that iteration on the total number of columns:

.column-#{$i} {
  width: percentage($i / $fg-max-columns);
}

Also, please mote that this approach is not semantic since you end up with classes that describe the layout itself, not the content.

score -2 · Answer 2 · edited May 23 '17 at 12:10

Is it possible that the percent sign is actually trying to return the remainder of the equation?

Check out the paragraph from this source: http://learn.shayhowe.com/advanced-html-css/preprocessors

"Multiplication is completed with the asterisk sign, *, however only one of the numbers, if any, may include a unit of measurement. Using the percent sign, %, will return the remainder of the two numbers upon being divided, and as with multiplication, only allows one number, if any, to have a unit."

Also, would it be possible to utilize the Sass percentage function? See this previous question on Stack: Calculate a percent with SCSS/SASS

adding a % unit to a Variable in a for loop sass

2 Answers2