Advertisement
  1. Web Design
  2. PostCSS
Webdesign

PostCSS 深入学习:简写和速写

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called PostCSS Deep Dive.
Using PostCSS with BEM and SUIT Methodologies
PostCSS Deep Dive: Miscellaneous Goodies

Chinese (Simplified) (中文(简体)) translation by Bula Tie (you can also view the original English article)

到目前为止,我们已经使用 PostCSS 做了很多事情,比如,优化样式,给预处理器增加功能,生成某些符合规范的样式,但是它能帮助到只写原始 CSS 的人吗?

每个 web 设计师在他们的职业生涯中都会写出有很多小块的代码,如果你能用一点时间把每一个都收集起来到最后那将会变得很多。

在本教程中,我们要使用 PostCSS 的一系列的简写和速写来减少每天的编代码的时间。 让我们开始吧!

设置你的项目

到现在为止,你将会熟悉这个过程,但你需要做的第一件事是使用 Gulp 或 Grunt 设置您的项目。 如果你不是对某个特别熟悉,我推荐你使用 Gulp,因为你需要用更少的代码来达到同样的效果,所以你应该找一个更简单的用。

你可以阅读以前的教程来学习如何用 Gulp 或 Grunt 安装 PostCSS 项目。

分别。

如果你不想从头设置你的项目,你可以下载教程中附带的源代码文件,解压 Gulp 或 Grunt 的其中一个到一个空工程目录下。 然后使用终端或命令提示工具进入指定的目录执行 npm install 命令

安装插件

在本教程中我们将安装几个插件,每个处理不同类型的简写或速写。

不论你用 Gulp 或 Grunt,在你的项目目录下运行以下命令来安装我们将用到的插件:

现在,我们已在项目中准备好要加载的插件了。

加载插件通过 Gulp

如果您使用 Gulp,在文件中添加下面的这些这些变量:

现在将每个这些新的变量名添加到您的 processors 数组中:

做一个快速测试,通过运行命令 gulp css,然后检查新的 "style.css" 文件 文件出现在了你项目的 "dest" 文件夹下。

加载插件通过 Grunt

如果您使用 Grunt ,更新被嵌套在 options 对象下 processors 对象,如下所示:

做一个快速测试,一切都通过运行命令 grunt postcss 然后检查新的"style.css" 文件出现在您的项目"dest"文件夹。

好吧,现在你的插件是所有安装让我们了解如何使用它们来 CSS 简写和速写。

属性速写

有很多的属性,我们要在 CSS 中键入一遍又一遍。 当然,每次键入字符的时间是很小的,但是经过几年的开发加起来也会很多。 我们要看这里的两个插件,它们可以让你整理一些属性成为速写版本,为了你能够得到一个快速并且流畅的体验来编写你的 CSS。

定义你自己的速写

由 Sean King 编写的 postcss-alias 插件允许你定义自己的速写或"别名",为了你想要简写任何属性。  这可以确保你使用的速写标记符合你的思想方式并且对于你的记忆也很容易。

若要定义一些别名需要在样式的顶部加上一个语法是@规则的 @alias {...} 语法。 然后在 @规则内通过添加 alias-name: property-name; 设置你的别名

向你的"src/style.css"里添加下面的示例 文件将要为 border-sizeborder-style , border-color 三个属性设置别名

然后添加以下代码来测试使用新的别名:

编译您的文件,并在您的"dest/style.css" 现在您应该看到的文件:

更多关于 postcss-alias : https://github.com/seaneking/postcss-alias 

插头 n 发挥速记

如果您想要使用大量的属性速记,但你不想通过自己去定义每一步骤,你可以查阅由 Johnie Hjelm 编写的有数百个属性缩写的插件 postcss-crip 来插入和和发挥使用。

例如,将以下代码添加到您的"src/style.css" 文件,其中包含的 margin-top 、 margin-right 、 margin-bottommargin-left 属性的简写:

编译您的代码,您应该看到出现在你的"dest/style.css"的扩展的属性 文件:

更多关于 postcss-crip 在: https://github.com/johnie/postcss-crip

看看在属性缩写的完整列表: https://github.com/johnie/crip-css-properties

在一行输出 @font-face

postcss-font-magician 插件由 Jonathan Neal 编写非常贴切其名称。 它允许您使用自定义字体通过简单的 font-family 规则,就好像你正在使用标准字体和字体将会想施了魔术般地工作。

将以下代码添加到您的"src/style.css" 文件:

就是这样。 这是使用 postcss-font-magician 所有需要的所有。 没有特殊的语法,只是使用的字体名称就好像你已经做了其它的工作。

在这个例子中,Indie Flower 是一个我从谷歌字体库中选择的一个字体。 我还没添加任何自定义字体文件到我的项目,所以该插件会查看并换而去查看我指定的字体是否从谷歌的字体可用。 当它发现它是可用时,它将完全自动地创建适当的 @font-face 代码。

编译你的文件,然后再看看你的"dest/style.css" 文件,它们已经把编译好的加入其中:

您可以检查该字体是正确加载,通过在"dest"文件夹中创建一个名为"index.html"的新文件 并将此代码添加到它里边:

对于字体加载您需要通过 http:// 地址查看此文件,而不是一个 file:// 地址,所以将该文件上载到 web 主机或使用像 Prepros 的应用程序来创建实时预览。

您应该看到 Indie Flower 字体应用到你所有的文本,如下所示: 

更多关于 postcss-font-magician 在这里: https://github.com/jonathantneal/postcss-font-magician

创建 CSS 图形

如果你使用过纯 CSS 来创建形状,你就会知道这一个相当棒的方法,包括像圆形和三角形的东西到你的设计都可以实现,但是它是用起来也非常棘手。 尤其是三角形,要搞清楚需要哪些代码能得到一个方向正确,大小合适的形状可能有点不是很直观。

这个问题可以通过使用由 Jed Mao 编写的 postcss-circle 和 postcss-triangle 得到缓解。 这两个插件创建一个简化的语法和直观的方式的使用纯 CSS 创建圆形和三角形。

添加一个圆

若要创建一个圆,使用的语法 circle: size color; 。 将以下代码添加到您的"src/style.css" 文件:

编译它,你就会看到下面的代码添加到您的"dest/style.css" 文件:

现在将此 HTML 添加到在上一部分创建的 "dest/index.html" 文件中:

刷新一下在浏览器中打开的文件,现在您应该看到一个红色的圆圈:

了解更多在 postcss-circle: https://github.com/jedmao/postcss-circle

添加一个三角形

你可以使用此插件添加三种类型的三角形:等腰三角形、 直角腰三角形和等边三角形。 每个在语法的设置上都稍微有点不同,你可以在插件的 Github 仓库主页上查看完整信息。

我们会添加一个等腰三角形,它的语法是:

让我们将这个示例等腰三角形添加到我们的"src/style.css" 文件:

编译的文件,现在您应该看到完整三角 CSS 在您的"dest/style.css" 文件:

来看看你的"dest/index.html"中添加这个 HTML 的三角形 文件:

通过刷新通过浏览器打开的文件,现在您应该看到指向右边红色等腰三角形:

了解更多在 postcss-triangle: https://github.com/jedmao/postcss-triangle

对常见任务使用简写

设置链接样式

设置链接的颜色是在每个项目中要做的工作,需要为默认链接和四个不同的链接状态设置样式。 由 Jed Mao 编写的 postcss-all-link-colors 插件可以让你快捷处理,一次输出您的所有链接的颜色。 

添加到您的"src/style.css"以下内容:

然后编译您的文件,你会看到所有所需的链路状态已设置:

也可以选择为特定状态生成不同的颜色。 只是在规则末尾添加一些花括号,并且使用 state: color; 的语法插入其中。

更新的代码,你只需要添加以下代码到您的"src/style.css" 文件:

现在当你编译的时候你会看到悬停状态相比其余的样式有不同的颜色:

更多关于 postcss-all-link-colors 在: https://github.com/jedmao/postcss-all-link-colors

垂直或水平居中

居中,垂直或水平,这些永远是被CSS 开发人员的视为眼中钉的任务之一。 Jed Mao 的 postcss-center 插件使这项任务变得简单得多,使用 top: center; 来达到垂直居中,left: center; 达到水平居中。

将此代码添加到您的"src/style.css" 文件:

然后编译它,你会看到下面的代码:

: 这个居中使用了绝对定位,所以包裹它的父元素将需要使用相对定位,绝对定位或固定定位。 因为给定的绝对定位元素不会对他们父元素的高度或宽度产生影响,所以你需要自己设定父元素的高度或宽度进行适应。

例如,添加 left: center; 到之前写的 .circle 类中,这样他就会水平居中对齐:

然后增加第二个类作为圆的包装器,它可以为圆提供一个相对的定位和高度的匹配:

现在增加一个元素作为你 html 中已经存在的圆的包装器:

当你回去和刷新您的页面时,您应该看到你的圆已经被水平居中:

更多关于 postcss-center : https://github.com/jedmao/postcss-center

一行输出清除固定

在任何设计里使用浮动定位,创建清除固定类是方便且重要的。 Sean King 的 postcss-clearfix 插件可以通过一行创建清除固定样式,只需为 clear 属性使用 fix 值。

对于清除固定将兼容到 IE8 及以上,添加以下代码到你的"src/style.css" 文件:

通过编译,您将看到它生成了以下清除固定代码,可以使用:

如果您需要使用清除固定兼容到 IE6 以上,要使用值不是 fix 而是 fix-legacy,比如这样:

当代码被编译后,你会看到它包括一点额外的内容,这使它对旧版浏览器变的友好:

了解更多在 postcss-clearfix: https://github.com/seaneking/postcss-clearfix

一行设置定位

当你不想使用默认定位时,比如 absolutefixedrelative 你不得不手动写出元素的 toprightbottomleft 定位。 它没有像设置 margin 或 padding 那样在一行内设置的简写方法。 直到你安装由 Sean King 编写的 postcss-position 插件前,那确实如此。 

有了这个插件,当使用 position 属性时,设置值为 absolute / fixed / relative 后,您可以在同一行声明toprightbottomleft的值。

将下面的代码示例添加到您的"src/style.css" 文件:

编译之后, 你会看到简写的样式已经变成了本需要你手写的多行。

这些值的声明方式于 marginpadding 具有相同的模式,比如,你可以在第一个值设置顶部和底部,在第二个值设置左边和右边,或者你可以用一个值设置四边。

例如,试试下面的代码:

您应该看到它编译成:

了解更多在 postcss-position: https://github.com/seaneking/postcss-position

同时设置宽度和高度

由 Andrey Sitnik 编写的 postcss-size 插件允许您缩减最常用的 widthheight 属性成了单一的 size 属性。 你可以通过两种方式使用: 传两个值,第一个为宽度的值,第二个是长度的,或者传一个值,它将同时为宽高设置。

通过添加下面的 CSS 到您的 "src/style.css" 文件来 测试一下。

在编译中,你应该看到这段代码现在在你的"dest/style.css" 文件:

了解更多在 postcss-size: https://github.com/postcss/postcss-size

设置水平和垂直间距

作为崇尚编码效率爱好者,在编写时出边距和衬距时,往往是两侧相等的,我经常发现自己希望有一个快捷方式一次可以声明纵向和横向间距。 我甚至写了几个 mixin 预处理器做到这一点。 感谢有由 David Hemphill 编写的 postcss-verthorz 插件,我再也不需要那些 mixin 了。

用这个插件可以使用 padding-vert 或者 margin-vert 设置垂直间距,使用 padding-horz 或者 margin-horz 设置水平间距。 将下面的代码示例添加到您的"src/style.css" 文件看看它是如何工作的:

在编译后,您将看到这些规则已经被扩展成内间距和外边距的声明方式了。

你还可以进一步简写这些属性到两个字符。 上面我们使用的示例代码可以缩写为以下形式,它们的输出将会完全一样:

了解更多在 postcss-verthorz: https://github.com/davidhemphill/postcss-verthorz

输出颜色代码

我最喜欢的默认文本颜色是 #232323,我不知道是不是只有我这样,但我厌倦了反复推敲这些相同的两位数。 我经常希望有一个简写方式,像可以缩减 #ffffff#fff 的方式一样。 由 Andrey Polischuk 编写 postcss-color-short 插件就可以。

当使用这个插件,如果你设置两位数颜色代码这些数字会重复进行,直到创建一个六位数的码值,例如 #23 将成为 #232323。 如果您设置一个数字颜色代码,它将重复进行,直到有三个数字,例如 #f 将成为 #fff。 您甚至可以使用它来设置 rgba() 颜色,您传递的第一个数字会重复三次,第二个用来作为 alpha 值,如 rgba (0,0.5) 将成为 rgba (0,0,0,0.5)

添加下面的到你的"src/style.css" 文件来试一下上面的。

在编译后,您会看到所有的颜色已经输出其完整形式:

更多关于 postcss-color-short 在: https://github.com/andrepolischuk/postcss-color-short

总结

让我们快速回顾一下在本教程中我们已经谈过的一切:

  • 每天的编写的小代码看似独立,但是把它们的用时加起来也会变的非常庞大,所以把它们进行简化编写是非常有意义的。
  • postcss-alias 插件使您可以创建您自己的简写属性
  • postcss-crip 插件有数百个预定义的属性简写
  • postcss-font-magician 使您可以使用自定义字体就好像他们是默认字体,自动为你生成 @font-face 代码
  • postcss-circle 和 postcss-triangle 插件可以直接地直观地创建 CSS 圆和三角形
  • postcss-all-link-colors 插件让你一次输出所有你链接状态的颜色
  • postcss-center 插件提供了使用 top: center; 和 left: center; 达到垂直和水平居中
  • postcss-clearfix 插件让你使用 clear: fix; 输出代码清除样式
  • postcss-position 插件允许你添加 topright,bottom 和 left 作为你使用 position 属性的一部分
  • postcss-size 插件允许你用一次设置宽度和高度
  • postcss-verthorz 插件允许你使用使用单一规则输出水平间距和垂直间距。
  • postcss-color-short 插件使您能够使用一至两位数十六位编码和其他颜色进行简写。

在接下来的教程中

在接下来的教程中我们学习到一些很棒的插件,但是它们不属于任何特定的类别。 我们很快会在 “Miscellaneous Goodies” 相见。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.