Sass入门教程

Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展,可以编译成传统CSS,供浏览器使用。使用 Sass 是为了解决在大型项目中传统CSS会遇到的重复、可维护性差等问题。Sass 新增了nested rules(嵌套规则), variables(变量), mixins(混入), selector inheritance(选择器继承)等特性。

使用 Sass 优点:

  • 简单简洁
  • 语义化(expressive)
  • 重复使用性好(reusable)
  • 可维护性和扩展性好

Sass 的语法分为:

  • 新的SCSS  ( Sassy CSSSass 3,扩展名为*.scss);
  • 旧的SASS  ( 学习Haml,具备不使用大括弧格式、使用缩排,不能直接使用CSS语法、学习曲线较高等特性,扩展名为*.sass)

关于两者比较的补充可以参考这篇文章 What’s the difference between SCSS and Sass?

由于新的 SCSS 语法是 CSS3 的超集合,所以传统的 CSS3 档案就算直接复制过来也不会出错,学习曲线相对较缓,因此对于前端开发工程师来说推荐使用SCSS语法。

为了方便演示,你可以将示例代码直接在线转译:http://www.sassmeister.com/

本教程仅供入门学习,如果你想完整学习Sass,或者你的团队,你的项目中正在Sass,建议你查看完整的Sass文档:http://www.css88.com/doc/sass/

使用Sass

在开始介绍Sass特性之前,我们先来学习如何将 Sass 转译成 CSS 。 继续阅读

为什么使用 npm Scripts 构建项目

小编推荐导语
以下是特约作者Damon Bauer的帖子。已经有越来越多的观点(例如)认为直接使用 node packages,与他们提供的命令行界面,是一个好的路线。反之,将功能抽象到任务运行器后台运行已经越来越不被看好。在一定程度是,你无论如何都要使用npm,而同时npm提供了脚本功能,为什么不用呢?但使用npm的脚本功能的原因有很多。Damon会帮我们理解这样做的原因,并确切的告诉我们如何通过这种方式来完成前端构建过程中的大部分重要任务。

在过去的大概六个月里,我已经开始在我的项目中使用 npm scripts 。在此之前,我使用Gulp,再之前是Grunt。他们给了我很好的功能,通过自动化帮助我做了许多原先需要我手工做的事情,并且更快更有效地执行我的工作。但是我却开始觉得我在这些工具上花费的精力要比花在我自己代码上的精力多得多。 继续阅读