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

artsborba profile image

Let’s make the web responsive with just one installation line? I’m looking for contributors!

Arthur Borba -

techforcea profile image

A Beginner's Guide to LangChain: Simplifying AI Applications with Chain-Based Language Models

TechForce Academy -

asad11 profile image

The Future of AI: Transformations and Possibilities

Asad Israel Yaqoob -

kasir-barati profile image

How to configure TSC + Webpack + ESM for NodeJS

Mohammad Jawad (Kasir) Barati -