1. 首页
  2. css

CSS使用postss处理样式表中的图像

以下是阿列克斯·胡多琴科夫的客串帖子。Aleks在展示postss擅长什么以及它在前端堆栈中所扮演的角色方面做得很好。即:在CSS中做一些有用的工作。你将看到各种各样的postss插件在工作,它们都与处理图像有关。到最后,我敢打赌你一定能想象PostCSS对于CSS中的其他小领域有多大的帮助。

我们都在CSS中使用图像。例行公事。我们甚至可能没有意识到这一点,但有许多手工工作涉及到这可以变得容易得多。我将向您展示各种PostCSS插件,它们专门设计用于帮助处理CSS中的图像

本文中描述的每个插件都可以处理PostCSS可以解析的每个语法-CSS、SCSS、Less和PostCSS插件创建的语法。我将不描述如何使用PostCSS本身,因为Drew Minns已经有一篇优秀的文章。

让我们从处理CSS中的图像时涵盖大多数用例的插件开始。

Image Helpers

PostCSS assets plugin是处理图像的一个基本插件。它有很多功能。

内联图像

有时将图像制作成样式表中的数据URL是很有用的。少一个HTTP请求!

/* input.css */div {background: inline(\"images/logos/postcss.png\");}/* output.css */div {background: url(\"data:image/png;base64,iVBORw0KGgoAAAA...ggg==\");}

计算尺寸

有时您需要根据所使用图像的尺寸调整元素的大小或背景本身的大小。这个插件可以进行这些测量并根据需要输出它们。

/* input.css */body {width: width(\"images/foobar.png\");height: height(\"images/foobar.png\");background-size: size(\"images/foobar.png\");}/* output.css */body {width: 320px;height: 240px;background-size: 320px 240px;}

如果我们处理高密度图像,我们可以通过添加第二个参数来更正输出:

/* input.css */body {width: width(\"images/foobar.png\", 2);height: height(\"images/foobar.png\", 2);background-size: size(\"images/foobar.png\", 2);}/* output.css */body {width: 160px;height: 120px;background-size: 160px 120px;}

URL resolution

这个插件可以帮助处理文件路径。我们不需要知道图像的完整路径。只有文件名就足够了。

例如,我们有这样的文件夹结构:

images/ logos/postcss.pnginput.css

我们像这样为插件设置选项。**意味着递归搜索所有文件夹和文件。

postcss([require(\"postcss-assets\")({loadPaths: [\"**\"]})])
/* input.css */div {background: resolve(\"postcss.png\");background: resolve(\"logos/postcss.png\");}/* output.css */div {background: url(\"/images/logos/postcss.png\");background: url(\"/images/logos/postcss.png\");}

<cachebursting

这个插件可以缓存图像。

postcss([require(\"postcss-assets\")({cachebuster: true})])
/* input.css */div {background: resolve(\"images/logos/postcss.png\");}/* output.css */div {background: url(\"images/logos/postcss.png?153bd5d59c8\");}

内联和修改svg

我最近处理的几乎每个图形都是svg。这是一个伟大的格式,处理任何像素密度显示。更好的是,它的语法是文本,这意味着我们可以编辑它们,而无需像图形编辑程序这样繁重的工具。

有一个用于内联svg的插件:postss inline svg。你可能会问,既然postss资产(我们已经讨论过)可以做到这一点,为什么我们需要它。原因是postss内联svg有一个致命的特性:它可以修改svg。

假设我们有一个星形图标,我们在站点周围的十个不同位置使用不同的颜色。我们有很多方法可以做到这一点。我们可以使用带有<symbol></symbol><use>的内联SVG系统。或者,我们可以在CSS中使用background属性!在CSS中有两种使用图像的方法。1) 带有文件路径的url(/path/to/image.jpg)值或带有数据URL的url(data:...)值。后者有时被称为\”内联\”图像,它实现了图像精灵的一个主要优点:结合HTTP请求。使用postcss内联svg,我们可以这样做(使我们的CSS文件成为我们的sprite),并且仍然可以独立地调整颜色:

/* input.css */.star--red {background-image: svg-load(\"img/star.svg\", url(\"data:image/svg+ url(\"data:image/svg+>

Will the output CSS file be enormous, you ask? Yes and no. The output CSS will be bigger because of code duplication, but it doesn\"t matter because of Gzip! To demonstrate, I\"ve made a test. I\"ve created a CSS file with 100 different selectors and add an inline icon in every ruleset with a random color for the fill。像这样:

.wibcsidpuaeqgbxvcjqq {background: svg-load(\"images/star.svg\", fill: #8c0); }

然后我创建了这个文件的副本,并删除了所有内联背景。以下是文件大小结果:

<2560字节

<1817字节

差异:2560–>

差异不大!

这种方法的唯一缺点是:无法设置图像变化的动画。例如,如果颜色在悬停时随过渡而改变,则没有方便的方法来实现这一点,因为transition不会应用于background-image

这些插件相互补充

现实世界示例:我们需要一个图标按钮。按钮内的图像需要特定的图像大小,还需要在悬停时更改颜色。只有一个源SVG文件。

标记:

<button>

Without any help, we might do something like this:

.delete {box-sizing: content-box;padding: 15px;/* Values based on this particular image */width: 26px;height: 32px;border: 1px solid #ef5350;border-radius: 3px;background: #fff url(\"images/trash.svg\") 50% 50% no-repeat;text-indent: -9999px;}.delete:hover {border-color: #c62828;/* Manually duplicate file and change things */background-image: url(\"images/trash-hover.svg\");}

使用postcss资产实现自动化,我们可以这样做:

postcss([require(\"postcss-inline-svg\")(),require(\"postcss-assets\")()]);

.delete {box-sizing: content-box;padding: 15px;width: width(\"images/trash.svg\");height: height(\"images/trash.svg\");border: 1px solid #ef5350;border-radius: 3px;background: #fff svg-load(\"images/trash.svg\",>

Output:

.delete {box-sizing: content-box;padding: 15px;width: 26px;height: 32px;border: 1px solid #ef5350;border-radius: 3px;background: #fff url(\"data:image/svg+ url(\"data:image/svg+>

If the image changes, you don\"t need to do anything! postcss-assets will update sizes. Need to change a color? They are right here in CSS. You can even use variables if you are using another plugin or preprocessor that offers those.

Example of output:

Sprites

There are still some reasons you might want to use the kind of image sprite where all the images are combined together into one larger image. For one, it is known that mobile phones decode inline images slightly slower than regular images.

There are lots of tools for creating image sprites. For example: grunt-spritesmith. These are powerful, aren\"t particularly easy to set up or convenient. In grunt-spritesmith, for example, you need to understand how its templates engine works.

The postcss-sprites plugin (based on spritesmith) is much more convenient. This is how it works:

/* input.css */.comment {background-image: url(\"images/sprite/ico-comment.png\");}.bubble {background-image: url(\"images/sprite/ico-bubble.png\");}/* output.css */.comment {background-image: url(\"images/sprite.png\");background-position: 0 0;}.bubble {background-image: url(\"images/sprite.png\");background-position: 0 -50px;}

它查找CSS中的每个图像(可以过滤),创建一个sprite,并输出正确的背景位置以到达那里。

处理高密度屏幕的sprite

尽管postss sprite支持视网膜图像,但它并不能为您提供生产就绪的代码。例如,它不提供媒体查询,以高密度屏幕为目标,实际使用这些图像。这个问题可以通过另一个postss插件来解决。这是postss生态系统的一种美-有

CSS使用postss处理样式表中的图像 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%bd%bf%e7%94%a8postss%e5%a4%84%e7%90%86%e6%a0%b7%e5%bc%8f%e8%a1%a8%e4%b8%ad%e7%9a%84%e5%9b%be%e5%83%8f/

发表评论

您的电子邮箱地址不会被公开。

原始大小 压缩
具有100个图像 48500字节
具有1个图像 <3158字节