参数为1a和1时的SASS条件

在mixin@if$param==x中@否则，如果$param==y，当x是一个以数字1a开头的字符串，而y是一个纯数字作为x1中的前导数字时，则条件落入错误的块中。这是一个bug还是故意的

@mixin view($view) {
  $bp_1a: 300px;
  $bp_1: 600px;

  @if $view == 1a {
    @media only screen and (max-width: $bp_1a - 1) { @content; }
  }
  @else if $view == 1 {
    @media only screen and (max-width: $bp_1 - 1) { @content; }
  }
}

@include view(1) { max-width: 1; }

---> compiled css

@media only screen and (max-width: 299px) {
  max-width: 1;
}

---

问题在于，sass假设条件中的1a为1。 如果要将1a作为字符串，则必须在值中添加引号

@mixin view($view) {
  $bp_1a: 300px;
  $bp_1: 600px;

  @if $view == "1a" {
    @media only screen and (max-width: $bp_1a - 1) { @content; }
  }
  @else if $view == 1 {
    @media only screen and (max-width: $bp_1 - 1) { @content; }
  }
}

@include view(1) { max-width: 1; }

希望能有帮助

注意。

测试以下各项正常@如果$view=='1a'{…}@include-view'1a'{…}，这意味着在@include-view'1a'中传递的是quote-1-a-quote字符串。我想说，sass假设1a在条件中是1，这相当奇怪。

@mixin view($view) {
  $bp_1a: 300px;
  $bp_1: 600px;

  @if $view == "1a" {
    @media only screen and (max-width: $bp_1a - 1) { @content; }
  }
  @else if $view == 1 {
    @media only screen and (max-width: $bp_1 - 1) { @content; }
  }
}

@include view(1) { max-width: 1; }