Sass control directive with decimal numbers

Question

I\'m trying to get a sass function going:

$times: 0.10 0.20 0.30 0.40 0.50 0.60 0.70 0.75 0.80 0.90;

@each $value in $times{
  .is-hidden-#{$value}{
    @in         


        

Answer 1

Your desired output is invalid CSS. From the CSS validator:

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) To make "1s" a valid class, CSS2 requires the first digit to be escaped ".\31s" [1s]

There are many times where Sass will give you errors when you try to generate invalid CSS. To generate valid results, you need to compose the selector using integers and adding the escaped decimal point like this:

@for $i from 1 through 9 {
  .is-hidden-0\.#{$i}s {
    @include hide($i / 10 * 1s);
  }
}

Answer 2

Here's a general way to escape decimal numbers for class names (replacing . with -)

@function strip-units ( $number ) {
    @return $number / ( $number * 0 + 1 );
}

@function escape-number ( $value ) {
    @if type-of( $value ) != 'number' {
        @return $value;
    }
    $int: floor( strip-units( $value ) );
    $fract: $value - $int;
    @if ( $fract == 0 ) {
        @return $int;
    }
    @while ( $fract != floor( $fract ) ) {
        $fract: $fract * 10;
    }
    @return $int + '-' + $fract;
}