Question

我正在尝试编写一个函数，该函数基于Sass（scss语法）的多种排列方式（而不是仅12列网格）创建网格布局。内部的for循环本身可以正常工作，但是当我将其包装在一个函数中时，它将不再起作用。我是使用Sass函数的新手，所以也许我搞砸了语法？还是这不可能？我只是在尝试避免为我要实现的每个布局编写新的for循环。预先感谢。

@function create-grid($num-cols) {
  @for $col from 1 through $num-cols {
    .col-#{$col}-of-#{$num-cols} {
      width: percentage($col / $num-cols);
    }
  }
}

Answer 1

Sass函数返回一个值。

如果要像这样以编程方式生成CSS，则需要使用mixin。

https://www.sitepoint.com/sass-basics-the-mixin-directive/

@mixin grid($num-cols) {
  @for $col from 1 through $num-cols {
    .col-#{$col}-of-#{$num-cols} {
      width: percentage($col / $num-cols);
    }
  }
}

@include grid(12)

Answer 2

对于任何偶然发现这篇文章的人，最终产品是：

@mixin create-grid($num-cols, $col-gutter) {
  @for $col from 1 through $num-cols {
    .col-#{$col}-of-#{$num-cols} {
      width: calc(
        ((100% - ((#{$num-cols} - 1) * #{$col-gutter})) / #{$num-cols}) *
          #{$col} +
          ((#{$col} - 1) * #{$col-gutter})
      );
    }
  }
}

非常感谢@HorusKol向我介绍了mixins的世界！

带有for循环的SCSS函数不起作用

2 个答案: