文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

什么是postcss

2024-04-02 19:55

关注

这篇文章主要讲解了“什么是postcss”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“什么是postcss”吧!

为什么要用postcss

随着技术的发展,目前css已经发展到了第三阶段css3.css3能够支持更多的动效,以前需要用js来实现的动画、过渡,计算等功能,如今大多都能够用css来实现,而且性能更佳。当然,随着业务的需要,在编写css过程当中,为了能够让css具备js的可复用性,灵活性、模块化开发以及更好的管理样式文件,像sass这样的css框架就应运而生。

css预处理器Sass

sass能够解决css一些缺憾,包括但不限于:

1.变量:声明一个变量,多处使用

$content: "Non-null content";
.main {
 content: $content;
}
编译为
.main {
 content: "Non-null content”;
}

2.嵌套:能够更好的明确父子层级关系,方便修改查找以及减少样式命名

.main  {

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }

}
编译为
 .main  .redbox {

    background-color: #ff0000;
    color: #000000;

}

3.引用混合样式:一处定义,多处使用

编译前:

@mixin clearfix {
 display: inline-block;
 &:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
.box{
@include clearfix
}

编译为:

.box{
display: inline-block;
}
.box:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

4.函数指令:像js一样开始编程

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
 @return $n * $grid-width + ($n - 1) * $gutter-width;
}
.sidebar { width: grid-width(5); }
编译为
.sidebar { width: 240px; }

以上4种是最为常见的,更多用法,请自行到Sass官网了解。

Css预处理器让前端开发人员大大提升了css开发速度,跟sass类拟的还有less,Stylus。

说说使用sass遇到的一些问题

1.基于Ruby,使用sass必须安装Ruby,内部是使用Ruby来编译的。

2.需要安装node-sass.目前前端都使用了gulp,webpack这些构建工具,那么如果用sass的话,webpack构建必须安装sass-loader,而sass-loader又依赖于node-sass,要知道node-sass安装速度极其慢,特别是使用window系统开发时,npm<5.4时,经常会出现node-sass安装不成功的情况。

3.全局变量的污染,在多人开发过程当中,定义选择器时,需要顾及到其他地方是否使用了同样的命名。

4.静态编译:预先编译,展示来页面当中的是已经编译好的css.

4.不支持未来的css。目前处于css3阶段,未来css发展方向值得期待,未来的CSS中将会支持更多的属性以及函数,其中不乏有变量,嵌套,值计算等。

postcss新革命

postcss定义:

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

postcss的优点

1.支持未来的css: 使用cssnext书写未来的css(postcss-cssnext plugin)

:root {
 --heading-color: #ff0000;
}
/ custom selectors /
@custom-selector :--headings h2, h3, h4, h5, h6, h7;
/ usage /
:--headings {
 color: var(--heading-color);
}

通过 cssnext,上述代码会被处理成以下内容

h2,
h3,
h4,
h5,
h6,
h7 {
 color: #ff0000;
}

2.编译速度大大提升。PostCSS 声称比预处理器快 3-30 倍。
3.丰富的插件系统,解放你的双手。
4.css模块化,将作用域限制于组件内,避免了全局作用域的问题,再也不用担心样式名重复了

Postcss属于css后处理器,动态编译css,也就是说,在运行的时候进行编译。
Postcss本身不会对你的css做任何事物,你可以把postcss当做一个壳,伴随着postcss的生态,衍生出更多postcss插件,能够帮你解决95%以上的css疑问,如果你需要自定义一个属于自己业务需求的css编写规范,那么你也可以为此开发一个特定的postcss plugin.

postcss在webpack当中的配置

npm安装postcss-loader,postcss-cssnext: npm install postcss-loader postcss-cssnext -D

webpack.config.js

什么是postcss

postcss插件参考

感谢各位的阅读,以上就是“什么是postcss”的内容了,经过本文的学习后,相信大家对什么是postcss这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯