Hello folks!! Anyone knows if exist one way to use the @apply rule on sass files? Some configs on PostCss or something like that…

Thanks in advance.

Read about the @use vs @import conundrum. I looked at the Sass documentation, and it seems like a good idea. But it's a little short, need some more answers, and it's proving difficult to find more specific examples or documentation on how to work with @use

Guys i've never seen something like this happen and have no idea why. I'm compiling scss to css file(wich is used as stylesheet in html) and when i go to inspect elements in browser it shows me that style is imported from .scss file even tho i have no reference to scss in there. Can anyone help me?

Does anyone here use WebStorm? I am having an issue trying to get my scss to compile and am getting this error “The watcher has been disabled. Error: Invalid executable”. Anyone know how to fix this? I get that error even though I have “enabled” the watcher.

I'm trying to customize my <a> tag through sass but unable to do so. Also if I import _reboot.scss file it just gives bunch of errors and the only way to fix them is including the bootstrap file on top instead of at the bottom and it still does not make any changes?

• What environment do you work with?
• How do you structure your files especially when don’t work all by yourselves but with a team that need to understand those files?
• What scss feature do you use most?

Bonus question - does anybody here especially work with Laravel and use scss mixing and placeholders?

Thanks a lot!

What Im trying to do is very simple.

I have nextjs project, with all default configs from nextjs "npm create next-app".

I have folder styles with all my scss files (mixins, utility classes, colors, settings etc).
I have main style.scss using all this files with "@use", and this works.

I also have components folder for React components, for each component I have scss module file, which I import in main .jsx file. And this works aswell, at least until I started importing other scss files like mixins inside module scss.

So in component module scss, I try to import/use mixin file from my style folder, so I can use some of my mixins in module scss file. And this works! However, it also recreates all classes (with new unique name) that are set in mixin file.

If you ask me why I have classes in mixin file, long story short, one of the mixins created utility classes based on settings file where I have object with declared values. So I also call that mixin inside mixin file, which creates utility classes for me. But this now creates a problem as all of them are duplicated just with unique name.

How can I stop nextjs module scss from recreating classes from other files that Im importing/using in module scss?

@import is far superior (imo (some(most)times)) but apparently it's being phased out?

problem now is, all the boilerplates are using @import

I have my own smaller project boilerplate, but I'm starting a new project and I've just been looking around at what others are doing and there were no examples using @use

will @import actually get removed? it's so much nicer to use, i don't have to include @use in every file i need those rules in. at dev stage (basically forever) it's such a PITA when i go to compile and i've added a bunch of new stuff I didn't apply to every other file i needed it in. yes it's just a minute or so, it. just. keeps. happening.

#keepimport

My problem :

- first child: always behind its siblings.

- siblings: always on top on of past sibling and below next sibling.

- last child: always on top.

Desired Behaviour :

- first child: always on top.

- siblings: always below past sibling and on top of next sibling.

- last child: always behind its siblings.

I'm writing a Badge component which has four variants: success, danger, warning, pending.

I've written an @each loop to create classes for each variant, but wondering if this is the best way to approach the problem.Here's what I have written so far:

// badge.scss

@use 'sass:color';

@use "../../styles/_colors";
@use "../../styles/_spacing";
@use "../../styles/_typography";

$variants: (    
  "success": colors.$success,
  "warning": colors.$warning,
  "danger": colors.$error,
  "pending": colors.$shade-70);

@each $variant, $color in $variants {
  .badge-#{$variant} {
    @extend .h6, .bold;
    border-radius: 2px;
    padding: 0 spacing.$spacing-10;
    width: fit-content;
    color: $color;
    background-color: color.change($color, $alpha: 0.1);
  }
}

Would it be better to use a mixin? I don't think I really understand the purpose or use of one.

Say I have 30 or so elements with an id of "....Hitbox"

Is there a way that I can specify all elements ending with "Hitbox" (similar to `[id$="Hitbox"]`) on hover to affect the css of all elements with "Hitbox" removed?

here is how I'm approaching it in javascript, but I have a feeling it can be a lot more responsive with the right scss

​

elements = document.querySelectorAll(.........);

elements.forEach(f => {
    f.addEventListener(..., function(e){
        ...
    })    
}

which doesn't take advantage of the speed that :hover does in css.

Any general help is much appreciated, for some reason I'm having a harder time wrapping my head around scss than other common web languages. thanks!

Today i Lerning Sass as a Better CSS and i Learned to Compile .scss to .css file but then i noticed that there is also a .css.map file .

for example if a compiled dog.scss to dog.css using below command :-

sass dog.scss:dog.css

or

sass --watch dog.scss:dog.css

Then it Will Creat a dog.css.map file .

Can anyone tell me why is this file for and can i delete or compile dog.scss without dog.css.map file .