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?
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.