您正在学习的是试看内容,报名后可学习全部内容 报名课程
人气值 4.9k

前端必备技能: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. 对页面制作感兴趣者