8

我正在尝试 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 值的函数吗？

4

2 回答 2

6

我不知道允许您@function在 CSS 中使用的现有 PostCSS 插件，但可能有一个。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：

输入.css

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

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

输出.css

.class {
  width: 25%;
}

.class2 {
  width: 300px;
}

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

希望有帮助！

于 2017-11-03T21:32:33.690 回答
0

PostCSS 不允许您直接在 CSS 中编写函数，但是，通过额外的扩展，您可以使用纯 js 编写函数，这将为您提供几乎无限的可能性。

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

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

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

哪个将被翻译成

.class{
  width:25%;
}
.class2{
  width:300px;
}
于 2016-10-05T12:52:35.370 回答