css预处理器和后处理器_本机CSS的6种预处理器功能

css预处理器和后处理器

使用诸如Sass，LESS和Stylus之类的预处理器始终可以为开发人员提供对其样式表的更多控制权，但是本机CSS逐渐缩小了差距。 CSS功能，例如变量，calc和mixins只是冰山一角； 让我们回顾一下哪些预处理器当前正在为我们提供帮助，以及本机CSS逻辑将如何改变我们的工作方式。

预处理器时代

Sass ， LESS和Stylus等语言抽象为开发人员提供了变量，mixin，函数，扩展等等，从而破坏了开发人员的世界。 这些预处理器填补了CSS无法提供的缺失功能。

但是，如果没有智力，就不应再将CSS视为“缺乏逻辑”。 随着CSS不断完善自己，我们已经瞥见了未来-可以与预处理器竞争的未来。

1.混起来

通常，我们将“ mixins”与预处理器（可以在整个项目中重复使用CSS声明组）相关联。 mixin可以用作独立的帮助器，也可以将值作为参数传递以使其更加灵活。

这是一个名为font-size的Sass @mixin示例。

@mixin font-size($size, $base) {
  font-size: $size; // fallback for old browsers
  font-size: ($size / $base) * 1rem;
}

上面的mixin将接受$size和$base ，并在@include声明中使用，并能够根据上下文调整参数。

/* Sass Call */
body {
    @include font-size(14, 16);
}

/* CSS output */
body {
  font-size: 14px;
  font-size: 0.875rem;
}

对于不支持rem浏览器，结果是基于rem的