PostCSS 中的 Sass 类函数答案

【问题标题】：Sass-like functions in PostCSSPostCSS 中的 Sass 类函数
【发布时间】：2016-08-31 01:59:09
【问题描述】：

我正在尝试 PostCss 并试图找到与 Sass 类似的功能。我坚持的一个功能是类似 Sass 的功能。

我的函数是 Sass：

// Variables.scss
$columns: 12; // Grid columns
$max-width: 1200px; // Grid max width

// Function.scss
@function grid($cols,$to-px:false) {
  @if ($to-px == false) { @return ($cols / $columns) * 100% };
  @return round(($max-width / $columns) * $cols);
}

// style.scss
.class {
  width: grid(3);
}
.class2 {
  width: grid(3,true);
}

// outputs to:

// style.css
.class {
  width: 25%;
}
.class2 {
  width: 300px;
}

我可以在 PostCSS 中编写这样的函数来返回单个 CSS 值吗？

【问题讨论】：

标签： css sass postcss

【解决方案1】：

PostCSS 不允许你直接在 CSS 中编写函数，但是 extra extension 你可以用纯 js 编写函数，这将给你几乎无限的可能性。

最近还创建了一个扩展https://github.com/titancat/postcss-define-function，它使您能够实现基本的算术转换+、-、*、/。

在您的具体情况下，您还可以使用自定义测量单位。在您的示例中，您可以将其称为 gw 和 gwpx（网格宽度像素）。这将使您能够以这种方式使用它：

.class{
  width:3gw;
}
.class2{
  width:3gwpx;
}

将被翻译成

.class{
  width:25%;
}
.class2{
  width:300px;
}

【讨论】：

我的回答是目前提供最佳解决方案。在不知道 postcss 是如何工作的情况下，我也不确定如何推荐两种不同的解决方案来解决问题。我支持它，虽然它目前可能有点过时了。
非常感谢您的反馈，为什么我的回答是错误的。

【解决方案2】：

我不知道现有的 PostCSS 插件允许您在 CSS 中使用 @function，但可能有一个。 postcss-define-function 提供了一些类似的功能，所以不妨看看。

如果您需要的东西不存在，应该可以使用 PostCSS 的 atRule 类（可能还有其他类）编写一个。

但是，编写这样的插件会非常复杂，并且与 PostCSS 鼓励您创作样式的方式有些对立。

PostCSS 的主要优点之一是它允许您使用 JavaScript 操作样式；与其尝试用 CSS 编写函数，不如考虑用 JavaScript 编写它们。 postcss-functions 看起来就是这样做的，允许您公开用 JavaScript 编写的函数以在您的 CSS 中使用。您给定的示例可能如下所示：

require('postcss-functions')({
  functions: {
    grid:(cols, totalCols, maxWidth, toPx = false) {
      return toPx
        ? `${Math.round(maxWidth / cols * totalCols)}px`
        : `${cols / totalCols * 100}%`
    }
  }
});

这应该允许您像这样编写 CSS：

input.css

.class {
  width: grid(3, 12, 1200);
}

.class2 {
  width: grid(3, 12, 1200, true);
}

输出.css

.class {
  width: 25%;
}

.class2 {
  width: 300px;
}

如果不能完全按照您的预期工作，您可以随时向项目提出拉取请求，或编写自己的插件。

希望有帮助！

【讨论】：