Bootstrap 4.6.2 issue with Numeric Class

[jdinartejesus]

Hello everyone,

I've being trying to use Sass with Bootstrap 4.6.2, and it's impossible since I've always the error due to numeric class's. Eg: .100{ since I'm moving our project to use sass module instead of node-sass. I know the issue would be solved by escaping the values (https://github.com/sass/sass/issues/2956, https://github.com/sass/sass/issues/255), but would be needed to add this to the core library.

Modules Versions:

bootstrap-scss: v4.6.1
sass-loader: v8.0.2
sass: v1.58.3

Variables creating the issue:

_variables.scss
$grays: map-merge(
  (
    "100": $gray-100,
    "200": $gray-200,
    ...
  ),
  $grays
);

Error message:

SassError: Expected identifier.
6 │   .100{

[borisdamevin]

Hi @jdinartejesus

You need to prefix the class with \3. Example:

.\3100 {
}

The browser will see .100 { has normal class.

[jdinartejesus]

@borisdamevin the issue is more the fact that comes directly from Bootstrap. I tried to overwrite variable but sadly doesn't work.

[nex3]

I'm not sure what the request is here. What specifically would you like to see change about Sass's behavior?

[voltaek]

@jdinartejesus Bootstrap v4 SCSS doesn't build any classes like the .100 you show in your error message, so I'm guessing you're using their $grays map of values to create classes from, which would mean the issue is in your code, not theirs.

Also, both of the issues you link to mention that CSS doesn't support dot-declared class names starting with numbers (without prefix hackery), so I'm not sure what you're looking for Sass to change. I would recommend you to just prefix your class with a valid character(s) so you are following CSS spec and can avoid fragile/hacky workarounds.