css预处理器是什么?

一、CSS预处理器

CSS预处理器是一种专门的编程语言,用来为CSS增加一些编程特性(CSS本身不是编程语言)。

不需要考虑浏览器兼容问题,因为CSS预处理器最终编译和输出的仍是标准的CSS样式。

可以在CSS预处理器中:使用变量、简单逻辑判断、函数等基本编程技巧。

二、CSS预处理器主要目的

  • CSS语法不够强大(例如:CSS选择器无法进行嵌套,导致CSS中存在较多重复的选择器语句);CSS中无法定义变量以及没有合理的样式复用机制,导致整体CSS样式难以维护。

.body .box .title {
  color: #478fb7;
  font-size: 17px;
}
.body .box .name {
  color: #478fb7;
  font-size: 12px;
}
  • 为了减少CSS代码冗余,为CSS提供样式复用机制,提高CSS代码的可维护性。

三、工作流程

各种预处理器语法不一样,但最终工作流程是一样的,以Sass为例。

  • 以Sass提供的语法规则编写样式代码

  • 经过编译器把Sass编写的代码转换成标准的CSS代码

  • 浏览器加载解析转换后的CSS样式(浏览器只能解析标准的CSS代码,而不能是Sass等)

四、主流CSS预处理器

  • Sass,2007,最早最成熟的CSS预处理器,有两种语法,分别以 .sass 和 .scss 为扩展名。SCSS是Sass 3引入的新语法,完全兼容CSS3,并继承了Sass的强大功能,和CSS语法结构更接近

  • Less,2009,受Sass影响大,以 .less 为扩展名

  • Stylus,2010,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,以 .styl 为扩展名

五、CSS预处理器的使用

  • 集成在前端开发工具中使用(插件),如 VS Code、WebStorm 等

  • 集成在项目构建工具中,在项目编译(打包)时进行自动转换,如 webpack、gulp等

更多前端开发知识,请查阅 HTML中文网 !!

以上就是css预处理器是什么?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏