为什么要用postcss

2023-03-05 08:24| 来源: 网络整理| 查看: 265

随着技术的发展，目前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

【本文地址】

公司简介

联系我们