Can scss support dynamically passing parameters like the js method?

for example, I use scss to define a style class:

.w{x}px: {
    width:{X}px;
}

write code directly

<div class="w20px">
<div class="w25px">
<div class="w30px">
<div class="w40px">

and then compile

automatically.

 .w20px: {
    width:20px;
}
.w25px: {
    width:25px;
}
.w30px: {
    width:30px;
}
.w40px: {
    width:40px;
}

is that all right?

Javascript less sass css front-end

Apr.25,2022

first of all, you have to preset the value you need (20pc25, 30pg40.) to achieve this:
should not be as smart as we thought, and passing parameters to functions is also an option.

you can use for traversal, refer to the following code:

$widths: (20,25,30,40);

@for $i from 1 through length($widths) {
  $item: nth($widths, $i);
  .w-sharp{$item}px {
    width: -sharp{$item}px;
  }
}

the result is roughly as expected:

.w20px {
  width: 20px;
}

.w25px {
  width: 25px;
}

.w30px {
  width: 30px;
}

.w40px {
  width: 40px;
}

No. @ mixin makes the declaration and @ include makes the call. As follows:

@mixin demo($demo:50) {  
    opacity:$demo/100;
    filter:alpha(opacity=$demo);
}
.demo{
    @include demo(30);
    width:$width;
    height:$width;
}

Yes, just use the for loop

it is also possible to use the @ while loop. All French files have @ while , and just draw the ladle according to the gourd

@mixin set-width($width){
    width:$width
}

when in use:

@include set-width(20px)

Previous: Element InputNumber counter add and subtract button disable

Next: The number of JVM GC does not suddenly increase in such a time.