scssphp: Issue while compilling Bootstrap 4.2.1, cannot parse

I found a workaround. I just changed the @at-root a#{&} to &[href] like in previous bootstrap versions.

So _badge look like this:

[....]

 // changed the @at-root a#{&} to &[href]
  // due to compiling errors
 &[href] {
    @include hover-focus {
      text-decoration: none;
    }
  }

[....]

and in the mixins_badge

@mixin badge-variant($bg) {
  color: color-yiq($bg);
  background-color: $bg;


  // changed the @at-root a#{&} to &[href]
  // due to compiling errors
  &[href]  {
    @include hover-focus {
      color: color-yiq($bg);
      background-color: darken($bg, 10%);
    }

    &:focus,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
    }
  }
}

Not the best solution but it seems to be working. I tested also all the badges classes, “no errors no problems”.

Happy to hear your opinion.

Got the same issue when compiling Bootstrap 4.2.1 SASS files. Porting _badges.scss files from earlier version is not a solution for me.

I’ve just tried commit cd6bedb75b1155426cd7f21de6a5314965b1cffc on @kingyond’s branch, and can confirm that a) it Bootstrap 4.2.1 compiles without error and b) badges are rendering as I would expect. Assuming that @kingyond’s changes haven’t broken anything else that I haven’t noticed, it would be great if the change could be merged into this repository.

@kingyond in https://github.com/leafo/scssphp/issues/616#issuecomment-455481858 points to a fork that seems to possibly fix the issue? Why don’t you submit a PR?

@liova99 this is not a correct solution because then you cannot automate the dependency management. In short, you don’t manipulate the 3rd party code, when you develop your own app. It’s just a workaround that can be acceptable in personal (or agency) projects not in commercial, professional ones.

Using older, possibly just incompatible or bugged, versions of a couple of Bootstrap files is clearly not the answer. Please can someone confirm the following:

1. Is this an issue with Bootstrap using non-standard syntax in 4.2.1 - in which case we should file a bug report there; or
2. is this a problem with scssphp not supporting valid syntax - in which case it should be fixed here?

Thank you.

I’m having the same problems - is this related to #614 ?

This is fixed in last version with #643

@glOOmyART @mind-bending-forks The problem with custom-select is related to Autoprefixer. https://github.com/twbs/bootstrap/issues/27181 - https://getbootstrap.com/docs/4.1/getting-started/browsers-devices/#supported-browsers

@kinsaz you don’t need to completely revert to BS 4.1 😉 it’s just the two files mixins/_badge.scss and _badge.scss which cause the problem, so if you just replace those with the BS 4.1 version you can still use BS 4.2 with badges 😉