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

价       格: 10.24
讲座评分: 评分不足
视频时长:1小时22分钟
等 82 人参与
试看讲座
可以用微信小程序直接看哦
及时获取更多直播动态
鼠标移动放大
28 收藏

讲师信息

Meathill
7.1k 声望
279

我是翟路佳,SF 主页 | 微博 | 博客

今年的目标是在技术开发培训上取得长足的进展,完成25场直播,收获至少一千个观众。

热爱编程,希望把程序员作为终身职业。享受不断学习、不断进步的过程,享受解决难题后的畅快。
从业10年有余,目前是一名全栈工程师,技术偏前端。
喜欢分享,好奇心旺盛,喜欢琢磨产品,喜欢观察商业模式。

内容简介

前言

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. 对页面制作感兴趣者

4 条评价

高阳Sunny · 2017年08月01日
载入中...
邢爱明 · 2017年08月01日

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

载入中...
JackLi · 2017年07月31日

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

载入中...
cnjs · 2017年07月31日
载入中...

SegmentFault 讲堂是什么?

SegmentFault 讲堂是以开发者为中心的视频演讲平台。 旨在和开发者一起分享和创造有价值的技术内容。 目前讲堂主要有视频观看,下载相关文档以及和主讲人聊天互动的功能。

关注 SegmentFault 服务号

  • 订阅讲堂开播提醒
  • 及时获取更多直播动态

添加 SF.GG 讲堂粉丝 QQ 群

  • 群号码:642336612(备注 SF 用户名)
  • 不定期获取讲座优惠信息,随时和开发者交流互动