什么是postcss


postcss 一种对css编译的工具,类似babel对js的处理,常见的功能如:

1 . 使用下一代css语法

2 . 自动补全浏览器前缀

3 . 自动把px代为转换成 rem

4 . css 代码压缩等等

postcss 只是一个工具,本身不会对css一顿操作,它通过插件实现功能,autoprefixer 就是其一。

与 less sass 的区别


less sass 是预处理器,用来支持扩充css语法。

postcss 既不是预处理器也不是后处理器,其功能比较广泛,而且重要的一点是,postcss可以和less/sass结合使用

image

关于取舍


虽然可以结合less/sass使用,但是它们还是有很多重复功能,用其中一个基本就 ok 了。

以下是个人总结:

  • postcss 鼓励开发者使用规范的CSS原生语法编写源代码,支持未来的css语法,就像babel支持ES6,而且高版本的谷歌浏览器已支持部分语法

  • less、sass 扩展了原生的东西,它把css作为一个子集,这意味这它比原生更强大,但是迟早会和原生的功能重复,比如css变量定义高版本的谷歌已经支持,再比如js现在的 requireimport

  • 可以结合使用

现阶段来说区别不大,看个人喜好吧

如何使用


这里只说在webpack里集成使用,首先需要 loader

1 . 安装

cnpm install postcss-loader --save-dev

2 . webpack配置

一般与其他loader配合使用,下面*标部分才是postcss用到的

配合时注意loader的顺序(从下面开始加载)

rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{//*
loader: 'postcss-loader'
}
]
}
]

3 . postcss配置

项目根目录新建 postcss.config.js 文件,所有使用到的插件都需在这里配置,空配置项时配置xx:{}

module.exports = {
plugins: {
'autoprefixer': {
browsers: '> 5%' //可以都不填,用默认配置
}
}
}

注:也可以在webpack中配置

常用的postcss插件


autoprefixer

前缀补全,全自动的,无需多说

安装:cnpm install autoprefixer --save-dev

postcss-cssnext

使用下个版本的css语法,语法见cssnext (css4)语法

安装:cnpm install postcss-cssnext --save-dev

别忘了在postcss.config.js配置:'postcss-cssnext':{}

cssnext包含了 autoprefixer ,都安装会报错,如下:

Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in your postcss plugins. This might be inefficient. You should remove 'autoprefixer' from your postcss plugin list since it's already included by postcss-cssnext.

postcss-pxtorem

把px转换成rem

安装:cnpm install postcss-pxtorem --save-dev

配置项:

{
rootValue: 16, //你在html节点设的font-size大小
unitPrecision: 5, //转rem精确到小数点多少位
propList: ['font', 'font-size', 'line-height', 'letter-spacing'],//指定转换成rem的属性,支持 * !
selectorBlackList: [],// str/reg 指定不转换的选择器,str时包含字段即匹配
replace: true,
mediaQuery: false, //媒体查询内的px是否转换
minPixelValue: 0 //小于指定数值的px不转换
}

特殊技巧:不转换成rem

px检测区分大小写,也就是说Px/PX/pX不会被转换,可以用这个方式避免转换成rem

相关资料: 官网

cssnext (css4)语法


cssnext 和 css4 并不是一个东西,cssnext使用下个版本css的草案语法

自定义属性

相当于一个变量,变量的好处显而易见,重复使用

1 . 定义

:root 选择器定义一个css属性

:root{
--mianColor:#ffc001;
}

2 . 使用

使用 var(xx) 调用自定义属性

.test{
background: var(--mianColor);
} /*编译后*/
.test{
background: #ffc001;
}

比如在网站颜色上的使用,避免复制粘贴颜色

自定义属性集

一个变量里存了多个属性

1 . 定义

:root 选择器定义一个css属性集

:root{
--fontCommon:{
font-size:14px;
font-family: 微软雅黑;
};
}

2 . 使用

使用 @apply xx 调用属性集

.test{
@apply --fontCommon;
} /*编译后*/
.test{
font-size:14px;
font-family: 微软雅黑;
}

大小计算

一般用于px rem等的计算

语法:cale(四则运算)

/*css3*/
.test {
width: calc(100% - 50px);
}
/*css4 允许变量*/
:root {
--fontSize: 1rem;
}
h1 {
font-size: calc(var(--fontSize) * 2);
} /*编译后*/
.test{
font-size: 32px;
font-size: 2rem;
}

自定义定义媒体查询

1 . 定义

语法 @custom-media xx (条件) and (条件)

@custom-media --small-viewport (max-width: 30rem);

另外css4 可以使用>= 和 <= 代替min-width 、max-width

2 . 使用

@media (width >= 500px) and (width <= 1200px) {

}
@media (--small-viewport) { } /*编译后*/
@media (min-width: 500px) and (max-width: 1200px) { }
@media (max-width: 30rem) { }

自定义选择器

1 . 定义

语法:@custom-selector :name selector1, selector2;

@custom-selector 后必须有空格

@custom-selector :--test .test1,.test2;

2 . 使用

语法::name

:--test{
color: #fff;
} /*编译后*/
.test1,
.test2{
color: #fff;
}

注:与伪类使用,相互组合

@custom-selector :--test .test1,.test2;
@custom-selector :--testClass :hover,:focus;
:--test:--testClass{
color: #fff;
} /*编译后*/
.test1:hover,
.test2:hover,
.test1:focus,
.test2:focus{
color: #fff;
}

选择器嵌套

支持嵌套后,css代码就不那么混乱了,而且方便

1 . 直接嵌套

语法 &

.test {
& span {
color: white;
}
} /*编译后*/
.test span {
color: white;
}

2 . 指定如何嵌套

语法:@nest ... & ...,&指定位置

a {
@nest span & {
color: blue;
}
} /*编译后*/
span a {
color: blue;
}

3 . 自动嵌套(媒体查询中)

媒体查询中自动嵌套到内部

.test {
@media (min-width: 30rem) {
color: yellow;
}
} /*编译后*/
@media (min-width: 30rem) {
.test {
color: yellow;
}
}

image-set() 图像依据分辨率设置不同的值

不常使用,后续补充

color() 调整颜色

示例,使用 color(value alpha(百分比)) 调整颜色

.test {
color: color(red alpha(-10%));
} /*编译后*/
.test {
color: rgba(255, 0, 0, 0.9);
}

font-family 新增值 system-ui

system-ui 采用所有系统字体作为后备字体

body {
font-family: system-ui;
} /*编译后*/
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;
}

更多在官网查看

参考资料:官方网站 左手121

PostCSS以及cssnext语法的更多相关文章

  1. 展望未来:使用 PostCSS 和 cssnext 书写 CSS

    原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一 ...

  2. 在webpack中使用postcss之插件cssnext

    学习了precss插件包在webpack中的用法后,下面介绍postcss的另一个重要插件cssnext,步骤没有precss用法详细,主要介绍css4的语法,cssnext目前支持了部分新特性,你可 ...

  3. [译]PostCSS介绍

    PostCSS介绍 原文链接:http://www.smashingmagazine.com/2015/12/introduction-to-postcss/ 转自:http://www.zcfy.c ...

  4. cssnext下一代的css

    前端技术更新迭代的速度令人咂舌,互联网+的风头刚起那几年,前端技术大多还停留在jquery阶段,按需加载还停留在seajs和requirejs的阶段,css3和H5也不过才崭露头角,但经过几年的飞速发 ...

  5. Webpack实战(七):简单搞懂PostCSS的用法及与一些插件的用法

    不知不觉地春节要来临了,今天已经是放假的第二天,想想回老家之后所有的时间就不是自己的了,要陪孩子玩,走亲戚等等,我还是趁着在郑州的这两天,把几天后春节要发布的文章给提前整整.在此,提前祝大家春节快乐! ...

  6. PostCSS一种更优雅、更简单的书写CSS方式

    Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...

  7. PostCss 从0开始

    PostCss 摘自 http://ju.outofmemory.cn/entry/215105 http://www.w3cplus.com/PostCSS/postcss-deep-dive-pr ...

  8. postcss使用

    准备 构建工具为Gulp基于PostCSSPostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器PostCSS插件 Autoprefixer 为CSS补全浏览器前缀PostCSS插件 ...

  9. 教你一招解决浏览器兼容问题(PostCSS的使用)

    我们在处理网页的时候,往往会遇到兼容性的问题.在这个问题上分为两个大的方向:屏幕自适应&浏览器兼容.而屏幕自使用的方法有许多,包括框架之类的,但是浏览器的兼容却没有一个号的框架.在我们日常处理 ...

随机推荐

  1. mysql备份与还原-mysqldump备份、mysql与source还原

    以下都以在linux操作系统上的mysql为例 mysqldump备份 mysqldump实际就是将数据库中的数据转化为建库.建表和插入记录的sql语句 1.备份一个数据库 [或其中几个表],不指定表 ...

  2. 观实验室PPT演讲有感

    outline 一定要有 说话的语速要慢,压制住紧张的心情 提前一天发布PPT dont` argue with audience, especially professor and teachers ...

  3. 选择排序法、冒泡排序法、插入排序法、系统提供的底层sort方法排序之毫秒级比较

    我的代码: package PlaneGame;/** * 选择排序法.冒泡排序法.插入排序法.系统提供的底层sort方法排序之毫秒级比较 * @author Administrator */impo ...

  4. Codeforces 817C Really Big Numbers - 二分法 - 数论

    Ivan likes to learn different things about numbers, but he is especially interested in really big nu ...

  5. fatal: [db01]: FAILED! => {"changed": false, "msg": "The PyMySQL (Python 2.7 and Python 3.X) or MySQL-python (Python 2.X) module is required."}

    centos7.5 使用ansible中的role安装mariadb创建用户报错 错误: [root@m01 roles]# ansible-playbook site.yml TASK [mysql ...

  6. ODAC(V9.5.15) 学习笔记(十二)TOraLoader

    名称 类型 说明 Columns TDAColumns 需要载入数据的每个字段定义 LoadMode TLoadMode 载入模式,包括: lmDirect 通过内部数据缓冲区载入到数据库中 lmDM ...

  7. Restful framework【第十篇】响应器(渲染器)

    基本使用 -响应器(一般用默认就可以了) -局部配置 renderer_classes=[JSONRenderer,] -全局配置 'DEFAULT_RENDERER_CLASSES': ( 'res ...

  8. linux内核中侧async_tx是什么?

    答: 异步内存传输api(asynchronous memory transfer/transform API),这是一种api,用来为应用提供操作DMA的API. 下图是async_tx在架构中所处 ...

  9. 再谈fedora23下Virutalbox的安装. --问题的关键在于 安装kernel-devel包

    首先, 要使用 virutalbox的 rpm 安装包 进行安装. 在安装的过程中, 如果提示 有一些包, 没有, dependencies not resolved, 比如libQt..libvpx ...

  10. 放棋子|2012年蓝桥杯B组题解析第七题-fishers

    (13')放棋子 今有 6 x 6 的棋盘格.其中某些格子已经预先放好了棋子.现在要再放上去一些,使得:每行每列都正好有3颗棋子.我们希望推算出所有可能的放法.下面的代码就实现了这个功能. 初始数组中 ...