DEV Community

Dennis Frijlink
Dennis Frijlink

Posted on

Sass/SCSS identifier starting with a number

I'm writing SCSS mixins for using it for responsive web design.

For example:

// Large devices
@mixin lg {
    @media (min-width: #{$screen-lg-min}) {
        @content;
    }
}

// Extra large devices
@mixin xl {
    @media (min-width: #{$screen-xl-min}) {
        @content;
    }
}
Enter fullscreen mode Exit fullscreen mode

Now I wanna write a mixin for extra large devices

$screen-2xl-min: 1536px; 
Enter fullscreen mode Exit fullscreen mode

But when I try to declare the mixin:

@mixin 2xl {
    @media (min-width: #{$screen-2xl-min}) {
        @content;
    }
}
Enter fullscreen mode Exit fullscreen mode

He gives an error with:

Expected identifier: @mixin 2xl { 
Enter fullscreen mode Exit fullscreen mode

Can someone help me? Is there an option to let the name start with a number??

Top comments (0)