Kevin Powell - Community•4mo ago

@layer in SASS

Hi im just wondering if there is a plan to implement @layer in sass ? if not, what is the alternative in sass to scope or work on specificity ? im not into BEM and i dont see any other solution. I would have to then leave sass , but i really appreciate the use of sass variable and mixins. i dont think there is those on css right ?

17 Replies

ἔρως•4mo ago

sass works with layers if you do this:

body {
  color: red;
  
  @layer x {
    color: blue;
  }
}

body {
  color: red;
  
  @layer x {
    color: blue;
  }
}

https://sass-lang.com/playground/#eJwzNEzKT6lUqOZSUEjOz8kvslIoSk2xBvKAyCEnsTK1SKECLAuXT8opTQUpqOWqBQAa8hE9 you get the expected css:

body {
  color: red;
}
@layer x {
  body {
    color: blue;
  }
}

body {
  color: red;
}
@layer x {
  body {
    color: blue;
  }
}

joan.f_OP•4mo ago

ok my problem is my compiler , i guess , was using gulp-css-clean but i guess its to old and it doesnt take @layer into account . i am gone put another request because the reason i am using gulp is that i need to use scss and also to have a browser-sync in a wordpress custom theme in local. i couldn't make it work with vite . but thank you for responding to my question , i just couldn't find anything in the sass doc about the implementation of "@layer".

ἔρως•4mo ago

there is a much less ergonomic way of doing that, and it is by using the standalone sass compiler in the console or maybe it's time to migrate to vite?

joan.f_OP•4mo ago

Yes but i have tried many time and i cant find a way to have sass compiler , browser-sync on php, js, scss files, in local with Vite on Wordpress. Iam gone try to do it today and maybe i can ask question in this discord when i am stuck ? Yes xD i learned how to code with Kevin powell and i am still using the gulp browser-sync config that he gave us on youtube 5 years ago . I wish i could find the vite version 2025 of this video😆

ἔρως•4mo ago

well, somehow, laravel mix has done it

joan.f_OP•4mo ago

ok i didn't know about laravel-mix i'm checking it out . Sounds like a solution. 🙂

ἔρως•4mo ago

it is made for laravel, but i think you can try it outside of the laravel ecosystem

joan.f_OP•4mo ago

ho ok , im gone try with vite first then .

ἔρως•4mo ago

try it

joan.f_OP•4mo ago

It worked with Vite !!! thanks

ἔρως•4mo ago

you're welcome

joan.f_OP•4mo ago

question i see other topics in help , that i have answer to. Can i help them or its only you guys ?

ἔρως•4mo ago

everybody can answer, as long as you don't use ai to get the answer for the question

joan.f_OP•4mo ago

xD ok

ἔρως•4mo ago

if someone wanted an aswer from ai, that person could have already asked copilot or any other flavour

joan.f_OP•4mo ago

Ai sucks at coding , but im addicted to cursor autocomplete

ἔρως•4mo ago

if you aren't sure if you know the answer, it's always ask questions about it im not, i live happily without anything

Gaming

Programming

@layer in SASS

Did you find this page helpful?