PostCSS深入学习

作者: 前端知识  发布:2019-09-14

PostCSS深远学习:设置选项

2015/10/28 · CSS · POSTCSS

初稿出处: Kezz Bracey   译文出处:金沙澳门官网网址 ,大漠   

接待开启大家PostCSS浓密学习类别之快入门指南。在那么些初级教程中,可以让大家神速的垂询PostCSS和什么最得力的运用PostCSS。

在那篇小说中,我们将先告诉你如何设置PostCSS选项,所以您现在伊始应用PostCSS只要几分钟。接下来将告诉你什么样在Codepen和Prepros中设置PostCSS。

立时让我们看看哪些开端玩PostCSS。

PostCSS深入学习:Gulp设置

2015/10/28 · CSS · POSTCSS

原稿出处: Kezz Bracey   译文出处:大漠   

在上一篇文章中,大家介绍了怎么样在CodePen和Prepros中选拔PostCSS。纵然其中的选项设置能够让您第临时间接触和行使PostCSS,但也许有过多PostCSS插件限制你不可能选拔。

那篇教程将报告您如何在Gulp布署中运用PostCSS插件,况且能够依赖你和煦必要的去布署所要的插件。那才是真的的进去到PostCSS插件生态系统中。

极其申明:假定您从未接触或选择命令来配置Gulp的职分,作者提出你在读书本课程以前先读书前边我写的数不胜数教程:《网页设计的通令操作》。

CodePen中设置PostCSS

只要您是率先次接触PostCSS,那么通过CodePen来使用它是最快方式。

CodePen已早期集成了PostCSS,何况还辅助下边所列的PostCSS插件:

  • cssnext
  • postcss-simple-vars
  • postcss-discard-comments
  • postcss-custom-media
  • postcss-media-minmax
  • postcss-conditionals
  • postcss-each
  • postcss-for
  • postcss-nested
  • postcss-transform-shortcut

那个插件可以让您扶助未来的CSS语法、像Sass一样的函数、注释的删除和代码的缩写等等。

先是在CodePen在线编辑器上点击”NewPen“成立二个新的页面。然后单击CSS窗口左上角的小齿轮Logo,在弹出的面板中设置。

金沙澳门官网网址 1

单击“CSS Preprocessor”下拉选项,你能够选取下拉选项中的“PostCSS”选项。你也得以在”Vendor Prefixing“中选择“Autoprefixer”插件。

金沙澳门官网网址 2

下一场您能够点击“Need an add-on”按键,在弹出的面板中选拔你要求的插件。在弹出的面板将会彰显@准绳插件,复制粘贴这几个@准绳对应的PostCSS插件到您的CSS面板中,并且初叶应用。

金沙澳门官网网址 3

亟待的原则

是因为大家将索要利用Gulp,在始发前面包车型客车原委前面,小编假若你的管理器本地情况已经具备了下边列出来的尺度:

  • node.js
  • NPM
  • Git

一旦您无法认同你的微管理器本地系统是不是安装了那一个,建议您跟着那篇教程操作叁遍,因为这几个原则是我们进去教程后边必备条件。

本来你也得以先阅读那篇教程,确认保证您对Gulp的基本操作有所精晓。另外,根据教程中的“Gulp安装项目”部分,确定保障您的档案的次序文件夹中有以下面所列文件:

  • 一个gulpfile.js文件
  • 一个package.json文件
  • 依靠项目所需安装注重模块,运维gulp install会有贰个node_modules文件夹

CodePen用法的例证

让多们看看怎么着在CodePen中使用PostCSS的插件cssnext示例。

在CSS面板最上端,增多你想要的cssnext插件代码:

@use cssnext;

1
@use cssnext;

有了那条代码,你将能够选用cssnext官网上叙述的保有功能特色。譬如,大家运用CSS的变量和函数给body设置二个background颜色。

首先,使用:root定义CSS变量。在CSS面板中加多像下边那样的代码:

:root { --body_bg_color: black; }

1
2
3
:root {
  --body_bg_color: black;
}

能够像上面的代码这样调用CSS的变量:

body { background: var(--body_bg_color); }

1
2
3
body {
  background: var(--body_bg_color);
}

本条时候你应该看到了预览面板上的背景颜色形成了black。你也能够点击CSS面板右上角的”View Compiled“开关看到变化的代码:

金沙澳门官网网址 4

接下去,如果大家想让背景颜色不假设全红棕,想变亮一点。大家能够利用未来的语法修改颜色。

在地方注脚的CSS变量中,修改--body_bg_color变量值,从black变成:

--body_bg_color: color(black lightness(20%));

1
--body_bg_color: color(black lightness(20%));

那是四个lightness()函数,在black颜色上调20%的亮度,这一年你能够看来背景颜色从嫩绿形成了深丁香紫。

金沙澳门官网网址 5

可以在CodePen以这种措施选拔任何协理的PostCSS插件:

  • 通过@准绳引进你想要的利用的PostCSS插件
  • 依赖插件的下令在CSS面板中行使(在上头你能找到呼应插件使用表明的链接地址)

上面正是大家前段时间在CodePen中利用PostCSS获得的尾声效果:

链接地址

扩张教程

实在那么些内容在网络一搜第一次全国代表大会把,为了初学者更加好的翻阅接下的内容,这里提供部分参阅文书档案。

  • 在 Windows、Mac OS X 與 Linux 中安裝 Node.js 網頁應用程式開發環境
  • Node.js 安装配置
  • NPM 套件管理工科具
  • 居尔p开垦教程
  • 前面一个营造筑工程具gulp入门教程

在Prepros中使用PostCSS

Prepros中大概未有像CodePen中那么多插件可选取,但它回顾了Autoprefixercssnext插件,能够在Prepros面板中选中,进而激活对应的PostCSS插件。你能够点击此处下载Prepros。

开采Prepros面板,能够将项目拖到面板中,何况这几个面板满含多少个CSS文件。然后点击CSS文件,将会在左边手展开叁个装置面板。在那么些面板中您能够看出Prepros帮忙的PostCSS插件,你能够挑选你想用的PostCSS插件。举个例子说你选拔Autoprefixercssnext代表你利用了PostCSS那七个插件。

金沙澳门官网网址 6

如上海体育场所所示,你今后得以利用cssnext插件的享有作用以及Autoprefixed插件功效。

PostCSS在Gulp中的基本配置

率先在您的品种中创立几个文本夹,贰个命名称叫src,另二个命名字为destsrc文件夹用来放置未管理的CSS文件,而dest用来放置PostCSS插件管理后的文本。

接下去需求做的就是在你的系列中安装gulp-postcss插件,安装好未来就能够使用POstCSS管理器。

在安装在此之前,配置一下package.json文件:

JavaScript

{ "name": "testPostCSS", "version": "0.0.1", "description": "test PostCSS gulp plugin", "keywords": [ "gulpplugin", "PostCSS", "css" ], "author": "damo", "license": "MIT", "dependencies": { "postcss": "^5.0.0", "gulp": "~3.8.10" }, "devDependencies": { "gulp-postcss": "^6.0.1" } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "testPostCSS",
  "version": "0.0.1",
  "description": "test PostCSS gulp plugin",
  "keywords": [
    "gulpplugin",
    "PostCSS",
    "css"
  ],
  "author": "damo",
  "license": "MIT",
  "dependencies": {
    "postcss": "^5.0.0",
    "gulp": "~3.8.10"
  },
  "devDependencies": {
    "gulp-postcss": "^6.0.1"
  }
}

开垦你的授命终端,而且步入到您的连串根目录下,然后在指令终端输入下边包车型客车一声令下:

JavaScript

npm install --save-dev gulp-postcss

1
npm install --save-dev gulp-postcss

注:即使地点命令不能平常安装,建议在上边包车型地铁通令前增进sudo

JavaScript

sudo install --save-dev gulp-postcss

1
sudo install --save-dev gulp-postcss

运营完下面命令之后,倘诺没出任何过错,在你的顶峰命令中得以见到类似下图的唤起:

金沙澳门官网网址 7

安装完毕后您的品种结构看起来就活该像那样:

金沙澳门官网网址 8

今后通过编辑器展开gulpfile.js文件,并且创办gulpgulp-postcss变量,如上面代码所示:

JavaScript

var gulp = require('gulp'); var postcss = require('gulp-postcss');

1
2
var gulp = require('gulp');
var postcss = require('gulp-postcss');

我们现在得以设置三个义务,让PostCSS读取CSS原版的书文件何况管理它。

加上的代码如下:

JavaScript

gulp.task('css', function () { var processors = [ ]; return gulp.src('./src/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./dest')); });

1
2
3
4
5
6
7
gulp.task('css', function () {
  var processors = [
  ];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

我们一并来看一下上在的代码。在第一行,设置了三个任务名称为css。这么些职责将会实施几个函数,同反常间在那几个函数中创设了贰个名称叫processors的数组。今后这一个数组为空,这里将插入大家想接纳的PostCSS插件。

processors数组后边,大家钦赐了亟需管理的对象文件,即src目录中的任何CSS文件。

那中间使用了三个.pipe()函数,设置postcss()执行PostCSS,并且给postcss()传递processors参数,后边会告知PostCSS要动用哪个插件。

接下去的第1个.pipe()函数,钦点结过PostCSS管理后的CSS放置在dest文本夹中。

总计一下

好呢,连忙将方面的内容做个总计:

  • 试着在CodePen或Prepros中使用PostCSS
  • CodePen中提供了PostCSS13个插件
  • 在CodePen中的CSS面板中激活PostCSS插件,然后经过引进@平整,就足以行使一定的PostCSS插件
  • Prepros提供了Autoprefixer和cssnext插件
  • 在Prepros中式茶食击项目中任何CSS文件可以设置PostCSS给Prepros提供的PostCSS插件

测量检验编写翻译

src目录中创建一个测验文件style.css,并在那些文件中增多一些CSS的测量检验代码:

JavaScript

.test { background: black; }

1
2
3
.test {
    background: black;
}

前段时间在指令终端的门类目录下推行下边包车型地铁一声令下:

JavaScript

gulp css

1
2
gulp css
 

金沙澳门官网网址 9

那是刚刚设置的任务,施行完下面的任务之后,在dest目录中能够找到一个新的style.css文件。

当您展开那一个新文件后,你可以看来和你的源文件同样的代码。使用的代码并未别的的退换,那是因为大家还不曾利用任何的PostCSS插件。从原先的教程中,你就能知道它的插件实际上是会对CSS施行操作的。

本文由金沙澳门官网发布于前端知识,转载请注明出处:PostCSS深入学习

关键词: 金沙澳门官网

上一篇:金沙澳门官网网址性能优化技巧分享
下一篇:没有了