ie杂项_PostCSS深入学习：杂项物品

最新推荐文章于 2024-06-04 10:07:22 发布

daique1908

最新推荐文章于 2024-06-04 10:07:22 发布

阅读量198

点赞数

文章标签： html python css java javascript ViewUI

ie杂项

在本系列中，我们遍历了许多不同类别的PostCSS插件，为您CSS开发提供了各种不同的优势。但是一些最好的PostCSS插件不适合我们在先前系列文章中介绍的类别。

在本教程中，您将学习其中的五个“杂项”。我们将介绍：

丢失的网格
了解您的设计对具有postcss-colorblind色盲的人的外观
使用postcss-pxtorem将px单位转换为rem
使用rtlcss自动生成样式表的RTL版本
使用postcss-style-guide自动生成样式指南

让我们开始！

设置您的项目

与以往一样，您需要做的第一件事是根据您的喜好将项目设置为使用Gulp或Grunt。如果您还不喜欢其中一种，那么我建议您使用Gulp，因为您将需要更少的代码来达到相同的目的，因此您应该发现使用起来更加简单。

您可以在之前的教程中了解如何为PostCSS设置Gulp或Grunt项目

分别。

但是，如果您不想从头开始手动设置项目，则可以下载本教程附带的源文件，并将提供的Gulp或Grunt入门项目提取到一个空项目文件夹中。然后在终端或命令提示符指向文件夹的情况下，运行命令npm install 。

安装插件

现在，我们需要在您的项目中安装五个插件。无论您使用的是Gulp还是Grunt，请在项目文件夹中运行以下命令以安装我们将要使用的插件：

npm install lost postcss-colorblind postcss-pxtorem postcss-style-guide --save-dev

除了这五个以外，我们还将使用rtlcss，但是由于它与其他PostCSS插件的工作方式略有不同，我们将通过相应的Gulp或Grunt插件使用它。

如果使用Gulp，请使用以下命令安装gulp-rtlcss：

npm install gulp-rtlcss gulp-rename --save-dev

如果使用Grunt，请使用以下命令安装grunt-rtlcss：

npm install grunt-rtlcss --save-dev

现在，我们准备将插件加载到您的项目中。

通过Gulp加载插件

如果您使用的是Gulp，请将这些变量添加到文件中已存在的变量下：

var lost = require('lost');
var colorblind = require('postcss-colorblind');
var pxtorem = require('postcss-pxtorem');
var styleGuide = require('postcss-style-guide');

var rtlcss = require('gulp-rtlcss');
var rename = require('gulp-rename');

现在，将每个这些新变量名称添加到processors数组中：

var processors = [
		lost,
		// colorblind,
		pxtorem,
		styleGuide
	];

注意： colorblind已被注释掉，稍后将进行说明。

通过运行gulp css命令，然后检查项目的“目标”文件夹中是否已出现新的“ style.css”文件，来快速测试一切是否正常。

通过Grunt加载插件

如果您使用的是Grunt，请将嵌套在options对象下的processors对象更新为以下内容：

processors: [
          require('lost')(),
          // require('postcss-colorblind')(),
          require('postcss-pxtorem')(),
          require('postcss-style-guide')()
        ]

注意： require('postcss-colorblind')(),已被注释掉，稍后将进行说明。

通过运行grunt postcss命令，然后检查项目的“ dest”文件夹中是否出现了新的“ style.css”文件，来快速测试一切是否正常。

生成丢失的网格

Lost是Jeet的创建者Cory Simmons完全基于PostCSS的网格生成系统，Jeet是用Stylus编写的另一个非常成功的网格系统。它具有许多令人印象深刻的功能，但是部署非常简单。

首先在“目标”文件夹中创建一个名为“ index.html”的文件。我们将在此文件中设置基本的网格布局。向其添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="row">
	<div class="main"> 
		<h1>Main Area</h1>
	</div>
	<div class="sidebar">
		<h1>Sidebar</h1>
	</div>
</div>
	
</body>
</html>

然后将此代码添加到您的“ src / style.css”中，以设置基本的两列网格布局，包括主区域列和侧边栏列：

@lost gutter 1.618rem;

.row {
    lost-center: 75rem;
}

.main {
	lost-column: 3/5;
}

.sidebar {
	lost-column: 2/5;
}

让我们分解一下我们在这里所做的事情。

首先，我们使用@lost规则为Lost的一个选项（装订线大小）设置自己的值。默认情况下，装订线（列之间的间距）为30px 。我一直喜欢在设计中使用1.618rem作为间距，因此我将其设置为@lost gutter 1.618rem;行的新装订线大小@lost gutter 1.618rem; 。

接下来，我们设置了一个.row类，该类将环绕我们的列。这仅需要使用属性lost-center并指定行的宽度。该插件将负责在类上设置max-width ，将其居中并清除它。

之后，在.main和.sidebar类中，我们创建了列。

迷失并不会限制您使用预定数量的列（例如十二列或十六列）；您可以拥有任意数量的列。列宽是通过使用lost-column属性并将分数设置为值来确定的。在我们的代码中， .main类使用3/5的设置，因此它将占用5列中的3列，而.sidebar使用2/5以便使用5列中的2列。

编译文件，并在“ dest / style.css”文件中，现在应该看到以下代码：

.row {
    *zoom: 1;
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
}

.row:before {
	content: '';
	display: table;
}

.row:after {
	content: '';
	display: table;
	clear: both;
}

.main {
	width: calc(99.99% * 3/5 - (1.618rem - 1.618rem * 3/5));
}

.main:nth-child(n) {
	float: left;
	margin-right: 1.618rem;
	clear: none;
}

.main:last-child {
	margin-right: 0;
}

.main:nth-child(5n) {
	margin-right: 0;
}

.main:nth-child(5n + 1) {
	clear: left;
}

.sidebar {
	width: calc(99.99% * 2/5 - (1.618rem - 1.618rem * 2/5));
}

.sidebar:nth-child(n) {
	float: left;
	margin-right: 1.618rem;
	clear: none;
}

.sidebar:last-child {
	margin-right: 0;
}

.sidebar:nth-child(5n) {
	margin-right: 0;
}

.sidebar:nth-child(5n + 1) {
	clear: left;
}

在浏览器中查看时，“ dest / index.html”文件现在应显示两列布局，如下所示：

在这里很难确切地看到我们的网格正在发生什么，这就是Lost还提供lost-utility: edit;的原因lost-utility: edit; 突出显示网格，以便在开发过程中轻松可视化。

将此添加到到目前为止我们创建的每个类中：

.row {
    lost-center: 75rem;
	lost-utility: edit;
}

.main {
	lost-column: 3/5;
	lost-utility: edit;
}

.sidebar {
	lost-column: 2/5;
	lost-utility: edit;
}

现在，当您重新编译和刷新页面时，您应该看到网格突出显示，如下所示：

让我们通过一些额外的样式使一切更加清晰，以便再次看到（这也将有助于我们在本教程的后续部分中进行操作）。将您的“ src / style.css”文件更新为以下内容，添加一些附加功能，例如在列内填充以及一些背景和文本颜色：

@lost gutter 1.618rem;

* {
    box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
	font-family: "Open Sans";
}

html {
	padding: 0;
}

body {
	padding: 1.618rem;
	background: #16a085;
}

.row {
	lost-center: 75rem;
}

.main, .sidebar {
	padding: 1.618rem;
	min-height: 500px;
}

.main {
	lost-column: 3/5;
	background: white;
	color: #232323;
}

.sidebar {
	lost-column: 2/5;
	background: #2c3e50;
	color: white;
}

再次编译CSS并重新加载页面，现在您应该具有经典的两列布局，如下所示：

我们在此介绍的内容只是略述了Lost可以完成的工作，因此请务必阅读以下网址中的所有其他功能： https : //github.com/corysimmons/lost

透过色盲的眼睛看

色盲对您网站访问者的影响比您可能意识到的要大。例如，色盲最常见的类型是申命失肉，占所有男性的6％，女性的0.4％。换个角度看，估计IE9和IE10的结合使用了大约4％的网络流量。可能有人建议说，如果我们可以花大量的时间支持特定的浏览器，那么我们就可以将等量的时间用于支持人员。

Brian Holt的postcss-colorblind插件在评估具有各种色盲形式的人们对设计的可访问性方面提供了不可估量的帮助，因为它使您可以亲自观察如果您具有相同的视觉感知，则配色方案的外观。它允许您生成样式表的版本，以模拟八种不同的色盲。让我们看看如何使用它。

添加一些额外的颜色

首先，到目前为止，我们将在设计中添加一些额外的颜色，以帮助我们更清楚地看到我们将要生成的不同样式表的效果。通过在“ dest / index.htm”文件中已有的行下方添加以下html，我们将添加五个“地铁样式”磁贴：

<div class="row">
    <div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
</div>

现在，将以下代码添加到您的“ src / style.css”文件中，以五种不同的颜色设置这些图块的样式：

.row {
    margin-bottom: 1.618rem;
}

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

.tile:nth-of-type(1) {
	background: #f39c12;
}

.tile:nth-of-type(2) {
	background: #c0392b;
}

.tile:nth-of-type(3) {
	background: #8e44ad;
}

.tile:nth-of-type(4) {
	background: #2980b9;
}

.tile:nth-of-type(5) {
	background: #d35400;
}

编译后，您现在应该在浏览器中看到文件如下所示：

生成色盲模拟

您可能已经注意到，当我们较早设置processors阵列时，针对colorblind的条目已被注释掉。这是因为插件一旦激活，它将对您的样式表应用色盲模拟，因此在准备使用它之前，您不希望将其打开。现在取消在processors阵列中的注释。

要模拟八种色盲类型中的任何method ，请在您的Gulpfile或Gruntfile文件中传递此插件的选项method ，以及您要检查的色盲类型的名称。

例如，要模拟申命记，请设置以下选项：

/* Gulpfile */
colorblind({method: 'deuteranomaly'}),

/* Gruntfile */
require('postcss-colorblind')({method: 'deuteranomaly'})

现在重新编译您的样式表并刷新页面，您将看到您的设计就像一个具有申命的人：

您会注意到颜色看起来明显不同。患有子宫肉瘤的人看到红色和绿色的方式有所不同，因此尽管您会注意到蓝色几乎相同，但红色和绿色却大不相同。

要可视化盲目性，请设置以下选项：

/* Gulpfile */
colorblind({method: 'protanopia'}),

/* Gruntfile */
require('postcss-colorblind')({method: 'protanopia'})

重新编译样式表，现在您将看到以下内容：

患有质盲的人基本上根本看不到红色，而以不同的方式看到绿色。您会再次注意到，强烈的蓝色影响不大，但是紫色变成了纯蓝色，其余颜色变成了相同的淡黄褐色。彼此区分红色和两个橙色瓷砖已经变得非常困难。

生成所有不同类型的色盲模拟的能力令人难以置信的洞察力，可以帮助我们确保选择的配色方案不依赖于特定色相的感知，因此所有人都可以使用。

在以下网址了解有关postcss-colorblind的更多信息： https : //github.com/btholt/postcss-colorblind

转换px单位为rem

在几乎所有设计中，都非常有必要让rem发挥重要作用。但是，在创建布局时，很难以rem单位进行思考，而以px单位进行思考则更加容易。 postcss-pxtorem插件可通过自动将px单位转换为rem单位来帮助解决此问题。

该插件使用了适用的属性白名单，因此默认情况下，在以下情况下使用时， px单位将转换为rem ：

字形
字体大小
行高
字母间距

您可以通过设置prop_white_list选项向此白名单添加其他属性。更新您的Gulpfile或Gruntfile以添加width属性，如下所示：

/* Gulpfile */
pxtorem({
	prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing']
}),
        
/* Gruntfile */
require('postcss-pxtorem')({
	prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing']
}),

现在将以下代码添加到“ src / style.css”文件中，以便我们测试转换过程：

.convert_this {
    width: 500px;
	font-size: 18px;
}

编译文件，然后在“ dest / style.css”文件中，现在应该看到生成的rem值：

.convert_this {
    width: 31.25rem;
	font-size: 1.125rem;
}

在以下网址了解有关postcss-pxtorem的更多信息： https : //github.com/cuth/postcss-pxtorem

生成样式表的RTL版本

如果要迎合全球读者的需求，则可能需要为从右到左而不是从左到右读取的脚本提供支持，例如阿拉伯语和希伯来语。当脚本的方向发生变化时，网站的布局也应发生变化，因此对于那些首先看屏幕右侧的人来说，整个设计是有意义的。

Mohammad Younes的rtlcss插件使创建从右到左布局的过程变得更加容易，因为它可以自动扫描样式表并转换其方向，将“ left”一词替换为“ right”，反之亦然。

实际上，此插件的工作方式与其他PostCSS插件略有不同，因为我们无法将其添加到processors数组中。相反，在我们的项目设置过程中，我们为rtlcss安装了Gulp和Grunt插件，并且我们将设置单独的任务来执行它。

如果使用Gulp，请将以下代码添加到Gulpfile中：

gulp.task('rtl', function () {
    return gulp.src('./dest/style.css')
		.pipe(rtlcss())
		.pipe(rename({ suffix: '-rtl' }))
		.pipe(gulp.dest('./dest'));
});

如果使用Grunt，请在现有的grunt.loadNpmTasks行之后添加以下行：

grunt.loadNpmTasks('grunt-rtlcss');

然后在postcss任务之后添加一个逗号,并粘贴到这个新的rtlcss任务中：

rtlcss: {
	'default':{
		dest   : 'dest/style-rtl.css',
		src    : 'dest/style.css'
	}
}

现在，如果使用Gulp，请运行命令gulp rtl ，如果使用Grunt，请运行命令grunt rtlcss在您的“目标”文件夹中生成一个从右到左的样式表，命名为“ style-rtl.css”。

编辑您的“ dest / index.html”文件以加载“ style-rtl.css”而不是“ style.css”，刷新您的网站，您应该会看到布局已经翻转：

您会注意到文本仍然保持左对齐，但是只需添加text-align: left;即可轻松解决text-align: left; 在您的默认样式表中，rtlcss会将其转换为text-align: right; 。

在以下网址了解有关rtlcss及其与Gulp和Grunt同行的更多信息：

生成样式指南

postcss-style-guide插件是由Moraita Masaaki创建的出色工具。它使您可以根据样式表自动生成样式指南。您所要做的就是在CSS中添加一些注释，这些注释将被解析为Markdown并用于填充样式指南。

我们要做的第一件事是为我们的样式指南配置几个选项。我们将设置项目的名称，以便可以将其显示在样式指南的标题中，并且还将使用名为1column的自定义主题。

要将我们要使用的自定义主题安装到您的项目中，请运行以下命令：

npm install psg-theme-1column --save-dev

现在更新您的Gulpfile或Gruntfile来传递name和theme选项，如下所示：

/* Gulpfile */
styleGuide({
	name: 'Auto Style Guide',
	theme: '1column'
})

/* Gruntfile */
require('postcss-style-guide')({
	name: 'Auto Style Guide',
	theme: '1column'
})

postcss-styleguide的工作方式是在样式表中查找您的注释，并将找到的每个注释转换为一个样式指南条目。它将假定与它后面CSS相关的任何注释，一直到另一个注释或文档末尾。

因此，您要在样式指南中展示的所有CSS都应移至样式表的底部。我们将在样式指南中以及h1元素中显示彩色图块，因此我们需要将它们都放在文档的末尾。

首先将所有影响图块的类移到样式表的底部；这就是.tile类和五种.tile:nth-of-type()样式。然后还添加一些代码来控制h1元素，以便样式表的底部看起来像这样（未显示.tile：nth-of-type（）样式以节省空间）：

h1 { font-size: 42px; }

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

现在，我们可以添加一些注释来描述这些样式。这些注释中添加的所有html在样式指南中均将呈现为html，注释后CSS将显示在显示框中。

在样式表中添加一些注释，描述h1样式和.tile类，并包括一些示例html，因此最终得到以下内容：

/*
This is the h1 style

<h1>Heading 1</h1>

*/

h1 { font-size: 42px; }

/*
These use the .tile class

<div class="row">
    <div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
</div>

*/

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

现在编译样式表，在项目的根文件夹中查找并在浏览器中打开“ styleguide.html”文件：

嘿，presto，即时样式指南！

目前，它看起来有点时髦，因为它从样式表中选取了绿色的车身背景颜色。我们想要的是将内容放在白色背景上，并且我们可以使样式指南从样式表中提取一些其他代码来实现这一目标。

此样式指南模板的中心区域使用section元素，因此在描述h1元素的注释上方，添加以下代码：

section {
    padding: 1rem;
	background: white;
}

重新编译代码，刷新样式指南，您会发现它现在正在使用我们刚刚添加到section元素的样式，如下所示：

在那里，好多了。

在以下网址了解有关postcss-style-guide的更多信息： https : //github.com/morishitter/postcss-style-guide

回顾一下

总结一下我们上面介绍的所有内容：

Lost插件可让您创建仅具有几个属性的灵活网格，并在需要时提供许多其他功能。
postcss-colorblind插件可让您自己查看设计对八种不同色盲类型用户的外观。
postcss-pxtorem插件使您可以使用px单位编写代码，但可以在处理过程中将它们自动转换为rem单位。
rtlcss插件通过在代码中扫描单词“ right”并将其替换为“ left”来自动生成从右到左的样式表，反之亦然。
postcss-style-guide插件会根据添加到样式表中的注释自动生成样式指南。

下一步：制作自己的插件

在此PostCSS Deep Dive的下一个也是最终的安装中，您将学习如何解锁PostCSS提供的最大优势之一。可以使用它来创建所需的任何类型的功能。

您将学习如何制作自己的基本插件，并希望在此基础上继续为将来可能出现的需求制作更多的插件。

我会在最后的教程中与您见面！

翻译自: https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-miscellaneous-goodies--cms-24603

ie杂项

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ie杂项_PostCSS深入学习：杂项物品

在本系列中，我们遍历了许多不同类别的PostCSS插件，为您CSS开发提供了各种不同的优势。但是一些最好的PostCSS插件不适合我们在先前系列文章中介绍的类别。在本教程中，您将学习其中的五个“杂项”。我们将介绍：丢失的网格了解您的设计对具有postcss-colorblind色盲的人的外观使用postcss-pxtorem将px单位转换为rem 使用rtlc...
复制链接

扫一扫