PostCSS及其常用插件介绍

前几天,PostCSS 6.0 分布了。

PostCSS 处理了很多你不必处理的乏味工作。它很巧妙的不同于预处理器,提供了可选的且更简洁的编程语言,来编译成 CSS,如 Sass、Less 与 Stylus。得出这个结论的部分原因是:

  • 它的名字。PostCSS 既能在预处理器将源代码编译成 CSS 之前也能在其之后对文件执行操作。
  • PostCSS 能替代你的预处理器。现在有很多插件实现了一些设计,如变量、 嵌套、mixins 以及 extends。

然而,虽然你可以构建自己的预处理器,但除非你想限制功能并加快编译速度,你没有别的该这么做的理由。就我个人而言,为增强 CSS,我使用 Sass,再加以 PostCSS 辅佐。没什么波澜,可能是对于大多数前端使用者来说没什么大的影响,因为通常大家都是使用其插件。

CSS 预处理器 和 CSS 后处理器

在说 PostCSS 之前,先了解一下 pre-processor 。
继续阅读

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 。 继续阅读

为什么我放弃 Gulp 和 Grunt 而使用 npm Scripts

我知道你在想什么。 什么?!Gulp不是刚刚干掉了Grunt吗? 为什么我们不能在Javascript的地盘上消停一会儿呢?我知道,但是…

我发现Gulp和Grunt是没有必要的抽象,npm Script 已经足够强大,并且通常更好用。 继续阅读

为什么使用 npm Scripts 构建项目

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

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

webpack 2 入门

webpack 2将在文档完成后将正式发布(webpack 2.2 中文文档)。 但这并不意味着你现在不能开始使用版本2,如果你知道如何配置它的话。

webpack 2.2 已经正式发布! 现在通过 npm 安装 webpack 会自动安装 v2 版本。

什么是 webpack ?

简单来说,webpack 是一个针对 JavaScript 代码的模块打包工具。然而,自从它的发布,它逐渐发展成为所有前端代码的管理工具(不管是其本身有意还是社区的意愿)。 继续阅读

Chrome DevTools 中文文档

Chrome DevTools 中文文档地址:http://www.css88.com/doc/chrome-devtools/

Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具。使用开发者工具来重演,调试和剖析您的网站。

注意:寻找最新版本的Chrome 开发者工具,Chrome Canary总是有最新的DevTools。

打开Chrome 开发者工具

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击,选择 “检查”。
  • 使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。

继续阅读

Chrome DevTools – 测试响应和设备特定可视窗口

更新后的Device Mode(设备模式)(从Chrome 49开始)是现在“移动优先”开发工具的一个组成部分,并扩展了主要的DevTools 工具条。了解如何使用其控件来模拟各种设备或完全响应式。

TL;DR

  • 使用Device Mode(设备模式)的屏幕模拟器测试你的网站的响应式布局。
  • 保存自定义预设,以便以后轻松访问它们。
  • 设备模式不能完全代替真实设备的测试。 注意其局限性。 继续阅读

Chrome DevTools – 使用设备模式模拟移动设备

使用 Chrome 开发者工具的Device Mode(设备模式)来构建移动优先,完全响应式的网站。了解如何使用它来模拟各种设备及其功能。

简而言之

Chrome DevTools – 检查资源

按框架、域、类型或其他标准来组织管理资源。

TL;DR

  • 使用 Application(应用)面板的Frames(框架)窗格按frame(框架)组织管理资源。
  • 您还可以在Sources(源文件)面板中,通过禁用group by folder(按文件夹分组)选项,来按frame(框架)查看资源。
  • 要按域和文件夹查看资源,请使用Sources(源文件)面板。
  • Network(网络)面板中可以按照名称或其他条件过滤资源。

按frame(框架)组织管理资源

Application(应用)面板的Frames(框架)窗格中,以frame(框架)方式表示您的页面资源。 继续阅读

Chrome DevTools – 检查和删除 Cookie

Application(应用)面板中检查和删除 cookie。

TL;DR

  • 查看有关cookie的详细信息,例如其名称,值,域,大小等。
  • 删除单个Cookie,所选网域中的Cookie,或所有域中的所有Cookie。

概述

使用Cookie窗格查看和删除 cookie。 您不能修改cookie值。

cookie窗格 继续阅读