postcss入门

StevenDIY 2018-08-26 18:02:38

3244

分类专栏： css 文章标签： postcss css css预处理入门

最后发布:2018-08-26 18:02:38首次发布:2018-08-26 18:02:38

本文链接：https://blog.csdn.net/momDIY/article/details/82082793

版权

无需安装任何环境，即可在线体验未来的css生态系统。

一、什么是postcss

一个用 JavaScript 工具和插件转换 CSS 代码的工具，一套css的生态系统，通过组合插件的形式让我们更舒适的编写css。

二、它能做什么？

1.增强代码兼容性

为你的css代码添加特定的厂商前缀，增强可读性与兼容性。

<!--输入代码-->
:fullscreen {
}

<!--输出代码-->
:-webkit-:full-screen {
}
:-moz-:full-screen {
}
:full-screen {
}

2.无痛使用新特性

类似于babel，将浏览器可能不识别的高版本写法转化为大多数浏览器都能理解的东西。

<!--输入代码-->
@custom-media --med (width <= 50rem);

@media (--med) {
  a { 
    &:hover {
      color: color-mod(black alpha(54%));
    }
  }
}

<!--输出代码-->
@media (max-width: 50rem) {
  a:hover  { 
    color: rgba(0, 0, 0, 0.54);
  }
}

除了以上两种功能，postcss还具有支持使用未来语法、模块化css、简洁的网格系统布局、css代码错误提示、css代码规范检查等等强大的功能。

三、快速开始

想要快速掌握postcss推荐直接fork在github上的postcss项目进行调试研究。最快的方式是直接在codepen网页上使用它 Codepen。

1.点击css左边的配置按钮

first

2.CSS Preprocessor（css预处理器）选择postcss

second

3.点击添加引用

4.生成的代码

通过第三步点击添加加载项，你会发现css代码中多出了如下代码，以下就是postcss加载项的导入语法。

@use postcss-reverse-media;
@use postcss-extend;
@use postcss-mixins;
@use postcss-apply;
@use postcss-triangle;
@use postcss-color-function;
@use postcss-flexbox;
@use lost;
@use postcss-nested;
@use postcss-for;
@use postcss-each;
@use postcss-conditionals;
@use postcss-media-minmax;
@use postcss-media-minmax;
@use postcss-media-minmax;
@use postcss-media-minmax;
@use postcss-media-minmax;
@use postcss-media-minmax;
@use postcss-custom-media;
@use postcss-discard-comments;
@use postcss-simple-vars;
@use postcss-preset-env;

5.配置完毕，开始coding

到这里你就可以直接使用postcss写代码了，这时我们可以直接使用css4的语法（更准确的说就是使用未来版本的css语法）

举个栗子
- 使用自定义变量时，变量必须使用--开头,引用时必须使用var()包裹起来。
- 支持calc()，用于动态计算css的数值大小

<!--全局作用域下定义三个变量分别赋予不同值-->

:root {
  --fontSize: 1rem;
  --mainColor: #12345678;
  --secondaryColor: lab(32.5 38.5 -47.6 / 90%);
  --body_bg_color: color(black lightness(50%));
}

<!--var关键字意为引用了变量-->
body {
    color: var(--mainColor);
    background:var(--body_bg_color);
    font-family: system-ui;
    font-size: var(--fontSize);
    line-height: calc(var(--fontSize) * 1.5);
    overflow-wrap: break-word;
    padding-inline: calc(var(--fontSize) / 2 + 1px);
}