PostCSS 以及 cssnext语法

本文是对近两天学习postcss的总结，在这里分享给大家。

如有错误，还请指正！

什么是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;
}
复制代码

更多在官网查看

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/390393.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

5187. 收集足够苹果的最小花园周长

5187. 收集足够苹果的最小花园周长

给你一个用无限二维网格表示的花园&#xff0c;每一个 整数坐标处都有一棵苹果树。整数坐标 (i, j) 处的苹果树有 |i| |j| 个苹果。 你将会买下正中心坐标是 (0, 0) 的一块 正方形土地 &#xff0c;且每条边都与两条坐标轴之一平行。 给你一个整数 neededApples &#xff0c…
阅读更多...
虚拟机 VMware Workstation12 安装OS X 系统

虚拟机 VMware Workstation12 安装OS X 系统

Windows下虚拟机安装Mac OS X —– VMware Workstation12安装Mac OS X 10.11本文即将介绍WIN虚拟MAC的教程。完整详细教程&#xff08;包含安装中的一些问题&#xff09;【并且适用其他mac os x版本】Windows下 VM12虚拟机安装OS X 10.11(详细教程) 工具/原料 Mac OS X 10.11 镜…
阅读更多...
aws dynamodb_DynamoDB备忘单–您需要了解的有关2020 AWS认证开发人员助理认证的Amazon Dynamo DB的所有信息

aws dynamodb_DynamoDB备忘单–您需要了解的有关2020 AWS认证开发人员助理认证的Amazon Dynamo DB的所有信息

aws dynamodbThe emergence of cloud services has changed the way we build web-applications. This in turn has changed the responsibilities of a Web Developer. 云服务的出现改变了我们构建Web应用程序的方式。 反过来&#xff0c;这改变了Web开发人员的职责。 We use…
阅读更多...
北大CIO走进龙泉寺交流研讨会圆满举行

北大CIO走进龙泉寺交流研讨会圆满举行

缘起 2016年4月16日&#xff0c;北京大学信息化与信息管理研究中心秘书长姚乐博士与国家非物质文化遗产蔚县剪纸传承人周淑英女士一起在龙泉寺拜见了中国佛教协会会长、龙泉寺主持学诚法师。在拜见学诚法师时&#xff0c;姚乐博士与学诚法师聊到了“贤二机器僧”和人工智能。姚…
阅读更多...
负载均衡种类

负载均衡种类

http://blog.csdn.net/zhoudaxia/article/details/23672319DNS DNS轮询是最简单的负载均衡方式。以域名作为访问入口&#xff0c;通过配置多条DNS A记录使得请求可以分配到不同的服务器。DNS轮询没有快速的健康检查机制&#xff0c;而且只支持WRR的调度策略导致负载很难“均衡”…
阅读更多...
代码流星雨是什么形式_为什么要在2020年与流星合作

代码流星雨是什么形式_为什么要在2020年与流星合作

代码流星雨是什么形式Meteor, an allegedly dead development platform, is still alive and can bring massive value to your everyday coding experience.Meteor&#xff0c;据称已失效的开发平台&#xff0c;仍然有效&#xff0c;可以为您的日常编码体验带来巨大的价值。 …
阅读更多...
Centos7 Docker私有仓库搭建

Centos7 Docker私有仓库搭建

Centos7 Docker私有仓库搭建 仓库&#xff1a;集中存放镜像的地方&#xff0c;可分为公共仓库和私有仓库&#xff08;公共仓库"http://hub.docker.com"或国内的"http://www.daocloud.io"&#xff09; Registry&#xff1a;注册服务器才是存放仓库具体的服务…
阅读更多...
MySQL触发器使用详解

MySQL触发器使用详解

MySQL包含对触发器的支持。触发器是一种与表操作有关的数据库对象&#xff0c;当触发器所在表上出现指定事件时&#xff0c;将调用该对象&#xff0c;即表的操作事件触发表上的触发器的执行。 创建触发器在MySQL中&#xff0c;创建触发器语法如下&#xff1a; 代码如下: CREATE…
阅读更多...
java中访问修饰符_Java中的访问修饰符介绍

java中访问修饰符_Java中的访问修饰符介绍

java中访问修饰符什么是访问修饰符&#xff1f; (What are Access Modifiers?) Have you ever wanted to define how people would access some of your properties? You would not want anyone using your underwear. However, your close friends and relatives can use yo…
阅读更多...
VIM 编辑器

VIM 编辑器

2019独角兽企业重金招聘Python工程师标准>>> VIM 相对于VI 的提升 VIM 支持多级撤销VIM 可以跨平台运行VIM 支持语法高亮VIM 支持图形界面VIM 编辑器的操作模式 Command Mode -命令模式Insert Mode -输入模式Last Lin Mode -底行模式#使用yum 命令安装vim 软件&…
阅读更多...
/etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc 文件的作用

/etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc 文件的作用

转载自&#xff1a;http://blog.csdn.net/u013968345/article/details/21262033 /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. 并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一个运行bash shell的用户执行此文件…
阅读更多...
python初学者_终极Python初学者手册

python初学者_终极Python初学者手册

python初学者Python has become one of the fastest-growing programming languages over the past few years. 在过去的几年中&#xff0c;Python已成为增长最快的编程语言之一。 Not only it is widely used, it is also an awesome language to tackle if you want to get …
阅读更多...
z-index

z-index

z-index 这个东西非常简单&#xff0c;它有四大特性&#xff0c;每个特性你记住了&#xff0c;页面布局就不会出现找不到盒子的情况。 z-index 值表示谁压着谁&#xff0c;数值大的压盖住数值小的&#xff0c;只有定位了的元素&#xff0c;才能有z-index,也就是说&#xff0c;不…
阅读更多...
大型运输行业实战_day12_1_权限管理实现

大型运输行业实战_day12_1_权限管理实现

1.业务分析 权限说的是不同的用户对同一个系统有不同访问权限,其设计的本质是:给先给用户分配好URL,然后在访问的时候判断该用户是否有当前访问的URL. 2.实现 2.1数据库设计标准5表权限结构 2.2.sql语句实现,根据用户id查询该用户所有的资源 sql语句: SELECT ur.user_id, r.u…
阅读更多...
aws python库_如何使用Python，AWS和IEX Cloud创建自动更新股市数据的Excel电子表格

aws python库_如何使用Python，AWS和IEX Cloud创建自动更新股市数据的Excel电子表格

aws python库Many Python developers in the financial world are tasked with creating Excel documents for analysis by non-technical users.金融界的许多Python开发人员的任务是创建Excel文档&#xff0c;以供非技术用户进行分析。 This is actually a lot harder than i…
阅读更多...
37）智能指针（就是自动delete空间）

37）智能指针（就是自动delete空间）

1&#xff09;问题引入&#xff1a; 在java或者在C中&#xff0c;一旦你new一个东西&#xff0c;那么必然有一个delete与之对应&#xff0c;比如&#xff1a; 1 int main&#xff08;&#xff09;2 {3 int* p new int&#xff08;&#xff09;&#xff1b;4 5 *…
阅读更多...
linux 安装maven

linux 安装maven

2019独角兽企业重金招聘Python工程师标准>>> 目录:/usr/local/maven 1.下载 wget http://mirrors.hust.edu.cn/apache/maven/maven-3/3.5.3/binaries/apache-maven-3.5.3-bin.tar.gz 2.解压 tar -zxvf apache-maven-3.5.3-bin.tar.gz 3.配置 vi /etc/profile #讲下面…
阅读更多...
自由开发者怎么生存_如何作为自由开发者生存

自由开发者怎么生存_如何作为自由开发者生存

自由开发者怎么生存It’s been 8 weeks since we started experiencing the dramatic impact of the COVID-19 pandemic. In that time, we’ve all borne witness to how this virus can impact our families, our communities, and our livelihood. 自我们开始体验COVID-19大…
阅读更多...
UUID生成字符串

UUID生成字符串

在向数据库插入新数据时&#xff0c;可能需要插入字符串形式的ID&#xff0c;这时使用UUID可以生成随机字符串&#xff1a; String str UUID.randomUUID().toString(); 转载于:https://www.cnblogs.com/suhfj-825/p/8260861.html
阅读更多...
如何在React Native中使用react-navigation 5处理导航

如何在React Native中使用react-navigation 5处理导航

React-navigation is the navigation library that comes to my mind when we talk about navigation in React Native. 当我们谈论React Native中的导航时&#xff0c;React-navigation是我想到的导航库。 Im a big fan of this library and its always the first solution I…
阅读更多...
最新文章

Copyright @ 2022~2023