scss可以支持像js方法一样动态传参吗？

Question

例如我使用scss定义一个样式类：

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

写代码的时候直接写

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

然后编译后就可以自动编译出

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

可以这样吗

Answer 1

首先，你要预设你需要的值（20，25，30，40...）才能实现：
应该还没我们想象的那么智能，函数传参也是一种选择。

可以使用for遍历，如下参考代码：

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

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

得到的结果大致如所期望：

.w20px {
  width: 20px;
}

.w25px {
  width: 25px;
}

.w30px {
  width: 30px;
}

.w40px {
  width: 40px;
}

Answer 2

不可以。@mixin进行声明，@include来进行调用。如下：

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

Answer 3

可以的，使用for循环就好了

Answer 4

用@while循环也是可以的，用法文档都有@while，照葫芦画瓢就是了

Answer 5

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

使用时：

@include set-width(20px)