0

I have this code;

@each $viewport, $viewport-val in $viewport-vars {

    // Classes only apply once certain breakpoint is triggered.

    @include media-query(nth($viewport-val, 1)) {

    $_cols: nth($viewport-val, 2);

      @while $_cols > 1 {
        @for $i from 1 through $_cols {
          @if $i == $_cols {
            .pull-#{$viewport}-1/0 {
              $col-width: (100 / $_cols * $i);
              right: (percentage($col-width / 100));
            } 
          } @else {
           .pull-#{$viewport}-#{$i}-#{$_cols} {
              $col-width: (100 / $_cols * $i);
              right: (percentage($col-width / 100));
            } 
          }
        }
        $_cols: $_cols - 1;
      }

    }

  }

Where I have this line .pull-#{$viewport}-#{$i}-#{$_cols}, I would like to add slash in the classname like so, #{$i}/#{$_cols}

Unfortunately this throws an error, does anyone know why?

B

Sidney Gijzen
  • 1,931
  • 3
  • 24
  • 27
PI.
  • 1,658
  • 4
  • 19
  • 33
  • 3
    Slashes are not valid characters in a HTML class name for starters. http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors – sevenseacat Apr 16 '14 at 07:58
  • You can - http://jsfiddle.net/3Mg8b/ – PI. Apr 16 '14 at 08:04
  • 2
    If you have to use `[class~="classname"]` instead of `.classname` (aka, the way we've been selecting classes since the dawn of CSS) to select your element, you know you're doing something wrong. Try selecting it like you're _supposed_ to, and it doesn't work (eg, `.desk-1/2` won't work). Although, you can escape the forward slash with a backslash, so you could try that. eg, `.desk-1\/2` – Christian Apr 16 '14 at 08:10
  • Ok, its not valid, but lets get back to the original question regarding the sass implementation, can anyone provide an answer? – PI. Apr 16 '14 at 08:18
  • @sevenseacat There's a pretty easy way to test what's valid and what's not. An "it might not be valid" comment is a lot less useful than going out and testing validity. Also : http://www.w3.org/TR/CSS21/syndata.html#characters – cimmanon Apr 16 '14 at 10:51

0 Answers0