PostCSS以及cssnext语法
什么是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结合使用
关于取舍
虽然可以结合less/sass使用,但是它们还是有很多重复功能,用其中一个基本就 ok 了。
以下是个人总结:
postcss 鼓励开发者使用规范的CSS原生语法编写源代码,支持未来的css语法,就像babel支持ES6,而且高版本的谷歌浏览器已支持部分语法
less、sass 扩展了原生的东西,它把css作为一个子集,这意味这它比原生更强大,但是迟早会和原生的功能重复,比如css变量定义高版本的谷歌已经支持,再比如js现在的
require
和import
。可以结合使用
现阶段来说区别不大,看个人喜好吧
如何使用
这里只说在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;
}
更多在官网查看
PostCSS以及cssnext语法的更多相关文章
- 展望未来:使用 PostCSS 和 cssnext 书写 CSS
原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一 ...
- 在webpack中使用postcss之插件cssnext
学习了precss插件包在webpack中的用法后,下面介绍postcss的另一个重要插件cssnext,步骤没有precss用法详细,主要介绍css4的语法,cssnext目前支持了部分新特性,你可 ...
- [译]PostCSS介绍
PostCSS介绍 原文链接:http://www.smashingmagazine.com/2015/12/introduction-to-postcss/ 转自:http://www.zcfy.c ...
- cssnext下一代的css
前端技术更新迭代的速度令人咂舌,互联网+的风头刚起那几年,前端技术大多还停留在jquery阶段,按需加载还停留在seajs和requirejs的阶段,css3和H5也不过才崭露头角,但经过几年的飞速发 ...
- Webpack实战(七):简单搞懂PostCSS的用法及与一些插件的用法
不知不觉地春节要来临了,今天已经是放假的第二天,想想回老家之后所有的时间就不是自己的了,要陪孩子玩,走亲戚等等,我还是趁着在郑州的这两天,把几天后春节要发布的文章给提前整整.在此,提前祝大家春节快乐! ...
- PostCSS一种更优雅、更简单的书写CSS方式
Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...
- PostCss 从0开始
PostCss 摘自 http://ju.outofmemory.cn/entry/215105 http://www.w3cplus.com/PostCSS/postcss-deep-dive-pr ...
- postcss使用
准备 构建工具为Gulp基于PostCSSPostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器PostCSS插件 Autoprefixer 为CSS补全浏览器前缀PostCSS插件 ...
- 教你一招解决浏览器兼容问题(PostCSS的使用)
我们在处理网页的时候,往往会遇到兼容性的问题.在这个问题上分为两个大的方向:屏幕自适应&浏览器兼容.而屏幕自使用的方法有许多,包括框架之类的,但是浏览器的兼容却没有一个号的框架.在我们日常处理 ...
随机推荐
- mysql备份与还原-mysqldump备份、mysql与source还原
以下都以在linux操作系统上的mysql为例 mysqldump备份 mysqldump实际就是将数据库中的数据转化为建库.建表和插入记录的sql语句 1.备份一个数据库 [或其中几个表],不指定表 ...
- 观实验室PPT演讲有感
outline 一定要有 说话的语速要慢,压制住紧张的心情 提前一天发布PPT dont` argue with audience, especially professor and teachers ...
- 选择排序法、冒泡排序法、插入排序法、系统提供的底层sort方法排序之毫秒级比较
我的代码: package PlaneGame;/** * 选择排序法.冒泡排序法.插入排序法.系统提供的底层sort方法排序之毫秒级比较 * @author Administrator */impo ...
- Codeforces 817C Really Big Numbers - 二分法 - 数论
Ivan likes to learn different things about numbers, but he is especially interested in really big nu ...
- 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 ...
- ODAC(V9.5.15) 学习笔记(十二)TOraLoader
名称 类型 说明 Columns TDAColumns 需要载入数据的每个字段定义 LoadMode TLoadMode 载入模式,包括: lmDirect 通过内部数据缓冲区载入到数据库中 lmDM ...
- Restful framework【第十篇】响应器(渲染器)
基本使用 -响应器(一般用默认就可以了) -局部配置 renderer_classes=[JSONRenderer,] -全局配置 'DEFAULT_RENDERER_CLASSES': ( 'res ...
- linux内核中侧async_tx是什么?
答: 异步内存传输api(asynchronous memory transfer/transform API),这是一种api,用来为应用提供操作DMA的API. 下图是async_tx在架构中所处 ...
- 再谈fedora23下Virutalbox的安装. --问题的关键在于 安装kernel-devel包
首先, 要使用 virutalbox的 rpm 安装包 进行安装. 在安装的过程中, 如果提示 有一些包, 没有, dependencies not resolved, 比如libQt..libvpx ...
- 放棋子|2012年蓝桥杯B组题解析第七题-fishers
(13')放棋子 今有 6 x 6 的棋盘格.其中某些格子已经预先放好了棋子.现在要再放上去一些,使得:每行每列都正好有3颗棋子.我们希望推算出所有可能的放法.下面的代码就实现了这个功能. 初始数组中 ...