Question

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

Answer 1

我不知道现有的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);
}

output.css

.class {
  width: 25%;
}

.class2 {
  width: 300px;
}

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

希望有所帮助！

Answer 2

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中类似Sass的功能

2 个答案:

input.css

output.css