DEV Community

Dennis Frijlink
Dennis Frijlink

Posted on

Sass/SCSS identifier starting with a number

#question #scss #sass #mixins

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)

Read next

bregwin profile image

Trying to do Larger contributions to Open Source

Bregwin Jogi -

okpalan profile image

HTTP Authentication: Understanding Tokens, Sessions, and OAuth 2.0

Nnamdi Okpala -

chrislydemann profile image

New Angular project? This is how I would start

Christian Lüdemann -

okpalan profile image

Building a Secure Thread-Safe HTTP Server in Python: Understanding and Preventing Modern Attacks: A Modern Approach

Nnamdi Okpala -