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

2017年前端开发工具趋势

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢使用 Gulp , npm 和 jQuery ?如果是这样,根据 Ashley Nolan 的前端问卷调查,你是一个典型的前端开发工程师。

谎言,该死的谎言,统计数字和调查问卷

愚人码头注:谎言,该死的谎言,统计数字(英文:Lies, damned lies, and statistics),是一句著名的西方谚语。主要描述数字的说服能力,特别是用来讽刺一些使用统计数字支持、但毫无说服力的分析报告,以及人们倾向于贬低那些不支持其立场的统计结论。 维基百科

诸如此类的调查有助于你发现新工具和你的知识短板。至本文撰写时,本次问卷调查收到了5,254份答复,这是比大多数民意调查更具有样本价值。但是,调研结果是否代表真相还是应该抱审慎态度。。。

全球性的统计结果

这次问卷调查是全球性的,但将主要来自英语国家。 在其他地方开发或使用的流行工具可能被忽略。 继续阅读

webpack 2 入门

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

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

什么是 webpack ?

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

一个健壮且可扩展的 CSS 架构所需的8个简单规则

这是一份清单,里面列出了在我多年的专业 Web 开发期间,在复杂的大型 Web 项目中学习到的有关管理 CSS 的事项。我多次被人问起这些东西,所以写一份文档记录下来听起来是个不错的主意。

我已经尽力尝试用简短的语言去解释它们了,然而这篇文章本质上还是长文慎入:

  1. 总是类名优先
  2. 组件代码放在一起
  3. 使用一致的类命名空间
  4. 维护命名空间和文件名之间的严格映射
  5. 避免组件外的样式泄露
  6. 避免组件内的样式泄露
  7. 遵守组件边界
  8. 松散地整合外部样式

介绍

如果你正在开发前端应用,那么最后你肯定需要关心样式方面的问题。尽管开发前端应用的技术水平持续增长,CSS 仍然是给 Web 应用赋予样式的唯一方式(而且最近,在某些情况下,原生应用也一样)。目前在市面上有两大类样式解决方案,即:

  • CSS 预编译器,已经存在很长时间了(如 SASSLESS 及其他)
  • CSS-in-JS 库,一个相对较新的样式解决方案(如 free-style 和很多其他的

两种方法间的抉择不在本文过多赘述,并且像往常一样,它们都有各自的支持者和反对者。说完这些,在下面的内容里,我将会专注于第一种方法,所以如果你选择了后者,那么这篇文章可能就没什么吸引力了。

主要目标

但更具体地说,怎样才能被称为健壮且可扩展呢? 继续阅读

Chrome DevTools – 编辑CSS样式

使用Styles(样式)窗格修改与元素关联的CSS样式。

Styles pane

TL;DR

  • Styles(样式)窗格允许您以尽可能多的方式更改本地CSS,包括编辑现有样式,添加新样式,添加样式规则。
  • 如果你想要样式持久(他们页面重新加载而丢失),您需要将它们持久化到您的开发工作区。

检查应用到元素的样式

选择一个元素[Select an element] 来检查它的样式。Styles(样式)窗格将显示所有应用于所选元素的CSS规则,优先级从高到低展示: 继续阅读

Sass (3.4.21) 中文文档

Sass 是一个 CSS 的扩展,它在 CSS 语法的基础上,允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能,令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件,以及更高效地开发项目。

Sass中文文档:http://www.css88.com/doc/sass/

Sass注释: /* */ 和 //

完整的Sass中文文档翻译完成:http://www.css88.com/doc/sass/

翻译自Sass官方文档:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#comments

Sass 支持标准的CSS多行注释以/* */以及单行注释 //。在尽可能的情况下,多行注释会被保留在输出的CSS中,而单行注释会被删除。 例如:

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

编译为:

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }

如果多行注释的第一个字母是 !,那么注释总是会被保留到输出的CSS中,即使在压缩输出模式下。这可用于在你生成的CSS中添加版权声明。

使用插值语句 (interpolation) ,可以将变量值输出到多行注释中,例如:

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

编译为:

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

使用 Sass (Using Sass)-插件,缓存,配置选项,语法选择及编码格式

完整的Sass中文文档翻译完成:http://www.css88.com/doc/sass/
Sass 有三种使用方式:作为命令行工具,作为独立的 Ruby 模块 (Ruby module),或者作为 Rack-enabled 框架的插件,包括 Ruby on Rails 与 Merb。无论使用哪种方式都需要首先安装 Sass gem :
gem install sass

如果你使用的是Windows ,你可能首先需要安装Ruby

如果要在命令行中运行 Sass ,只要使用

sass input.scss output.css

你还可以使用Sass命令来监视某个Sass文件的改动,并自动编译来更新 CSS :

sass --watch input.scss:output.css

如果你的目录里有很多 Sass 文件,你也可以使用Sass命令来监视整个目录:

sass --watch app/sass:public/stylesheets

使用 sass --help 可以列出完整的帮助文档。

在 Ruby 中使用 Sass 也非常容易,Sass gem 安装完毕后,用它运行 require "sass", 然后按照下面的方法使用 Sass::Engine

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

继续阅读

Sass对CSS的扩展-嵌套规则,引用父选择器,属性嵌套,占位符选择器

完整的Sass中文文档翻译完成:http://www.css88.com/doc/sass/

翻译自sass官方文档:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#css_extensions

嵌套规则 (Nested Rules)

Sass 允许将一个 CSS 样式嵌套进另一个样式中,内层样式仅适用于外层样式的选择器范围内(愚人码头注:可以理解为层级选择器),例如:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译为:

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

这有助于避免父选择器重复,相对于复杂的CSS布局中多层嵌套的选择器 要简单得多。 例如:

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

编译为:

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

引用父选择器:& (Referencing Parent Selectors: &) {#parent-selector}

有些时候需要直接使用嵌套外层的父选择器,这个就很有用了,例如,你可能喜欢给选择器指定 hover样式,或者当body元素具有某个样式时,在这些情况下,你可以 & 字符来明确地表示插入指定父选择器。 例如: 继续阅读