mojotech / sass2stylus

Kewl
http://sass2stylus.com/
79 stars 18 forks source link

[Convert] Error prompt #97

Open claudchan opened 7 years ago

claudchan commented 7 years ago

Hi, I unable to convert these sass code:

@mixin breakpoint($min: 0, $max: 0) {
  $type: type-of($min);
  @if $type == string {
    @if $min == xxs {
      @media (max-width: 480px) { @content; }
    }
    @if $min == xs {
      @media (max-width: 767px) { @content; }
    }
    @else if $min == sm {
      @media (min-width: 768px) { @content; }
    }
    @else if $min == md {
      @media (min-width: 992px) { @content; }
    }
    @else if $min == lg {
      @media (min-width: 1200px) { @content; }
    }
  }
  @else if $type == number {
    $query: "all" !default;
    @if $min != 0 and $max != 0 { 
      $query: "(min-width: #{$min}) and (max-width: #{$max})"; 
    }
    @else if $min != 0 and $max == 0 { 
      $query: "(min-width: #{$min})"; 
    }
    @else if $min == 0 and $max != 0 { 
      $query: "(max-width: #{$max})"; 
    }
    @media #{$query} { 
      @content;
    }
  }
}
claudchan commented 7 years ago

It should be converted into something looks like this:

breakpoint(min = 0, max = 0)
  type = typeof(min)
  if type == ident
    if min == xxs
      @media (max-width 480px)
        {block}
    if min == xs
      @media (max-width 767px)
        {block}
    else if min == sm
      @media (min-width 768px)
        {block}
    else if min == md
      @media (min-width 992px)
        {block}
    else if min == lg
      @media (min-width 1200px)
        {block}
  else
    query = "all"
    if min != 0 and max != 0
      query = "(min-width: "+min+") and (max-width: "+max+")"
    else if min != 0 and max == 0
      query = "(min-width: min)"
    else if min == 0 and max != 0
      query = "(max-width: "+max+")"
    @media query
      {block}