前端必备技能:CSS 预处理工具 Stylus 详解

前言

CSS 面世已经超过20年,回顾 CSS 的历史,CSS-Tricks 站长 Chris Coyier 总结了 五个里程碑事件

  1. Firebug
  2. Chrome
  3. CSS3
  4. 预处理
  5. Flexbox & Grid

这次分享的就是第四个里程碑:预处理。CSS 是一种标记语言,它本身的可编程性很差,没有变量、没有逻辑判断、没有循环、没有模块管理,要用多少就得写多少,非常不利于后期维护和团队协作。另外,浏览器环境复杂多变,兼容性一直也是 CSS 的大问题,前端开发人员不得不不断挖掘学习各种稀奇古怪的 Hack 技术。

等到预处理工具出现,这些问题终于有了改观。开发人员不再需要直接写 CSS,通过预处理工具,可以大大减少重复性工作,也可以模块化组织代码。输出的 CSS 会自动包含各种兼容性扩展,一切都在向好的方向发展。

Stylus

本节分享会着重介绍 Stylus 的用法。相对于其它竞品,它有以下优势:

  1. 基于 Node.js 开发,和其它我们熟悉的工具处于同一平台,学习成本更低
  2. 支持各种级别的简写,可以无缝接入当前项目
  3. 语法简单、好扩展
  4. 包含丰富的内建函数

分享内容&目标

  1. Stylus 的基础用法
  2. Stylus 的高级用法
  3. 组织你的 Stylus 代码
  4. 配合其它工具使用

看完这次分享的同学,经过一些练习,可以掌握 Stylus 用法,并快速加入现有项目当中

面向受众

  1. 页面制作初学者
  2. 对页面制作感兴趣者

购买须知:
1、本课程为虚拟产品,一经购买,概不退款(讲师特别声明除外)
2、在使用过程中,遇到任何问题,请邮件联系:pr@sifou.com
3、划线价说明:商品展示的划横线价格为参考价,并非原价。该价格仅供您参考。

版权声明:讲者在本产品上发表的全部原创内容(包括但不限于文字、视频、图片等)著作权均归讲师本人所有。未经讲师授权许可,观众用户不得以任何载体或形式使用讲师的内容。

5.0 4条评价

Sunny · 2017-08-01

邢爱明 · 2017-08-01

最后给出的动画实例效果非常棒,赞!

JackLi · 2017-07-31

有收获,老师总结的几点stylus的用法很好用

cnjs · 2017-07-31