Is it possible to do bad math with sass?

[ghost]

Hi,my name is Gabrielle,first, sorry for my poor English.

I'm wondering if its possible to do bad math with sass,more like rounding divided number down to the closest number that can be divided by 8.

Example, 12 columns grid:

1/12 = 8.33% => 8%
2/12 = 16.67% => 16%
8/12 = 75% => 72%
...

In sass, lists:

$old-dividers: 8.33% 16.67% ... 100% ;
$new-dividers: 8% 16% ... 96% ;

And now if $columns-count = 12 then using sass loop should output new dividers for .col-sm-1 { width: 8%; } and so on..

And what if $columns-count != 12 ? I will need to automatically generate new dividers as list, save it in memory(??) and then use it in loop?

Like: i have 7 columns grid, so i need 7 old and 7 new dividers to generate grid where column width is nearest number that can be divided by 8.

I stuck with this,and i really like to experimenting ;p Thanks for your articles about sass, they are really helpfull

[ghost]

I mean something like combination of your linear gradient mixin with this mixing using color stops for stripped bacground-image: https://codepen.io/jackiebackwards/pen/Fzkvg So if i have old and new divider list, how can i replace old dividers with new using loop?

[KittyGiraudel]

Hello Gabrielle!

For the record, Sass has quite a few math functions:

• percentage($number): Converts a unitless number to a percentage.
• round($number): Rounds a number to the nearest whole number.
• ceil($number): Rounds a number up to the next whole number.
• floor($number): Rounds a number down to the previous whole number.
• abs($number): Returns the absolute value of a number.
• min($numbers…): Finds the minimum of several numbers.
• max($numbers…): Finds the maximum of several numbers.
• random(): Returns a random number.

It also supports the modulo operator (%) which in your case will come in handy. So I guess, you could get your “new dividers” (or rather, divisible-by-8-dividers) like this:

// Define how many columns the grid has
$columns-count: 12;

// Iterate over the columns to compose a class utility
@for $i from 1 through $columns-count {
  // Compute the value for the current index
  $divider: 100% / $columns-count * $i;

  // Generate a dynamic class name based on the current index
  .col-sm-#{$i} {
    // Get the closest but lower number divisible by 8
    width: $divider - $divider % 8;
  }
}

// 8% 16% 24% 32% 40% 48% 56% 64% 72% 80% 88% 96%
}

Would this work for you? :)