idea快捷键速记_PostCSS深入探究：快捷方式和速记

最新推荐文章于 2022-03-05 17:06:01 发布

daique1908

最新推荐文章于 2022-03-05 17:06:01 发布

阅读量438

点赞数

文章标签： python css java html javascript ViewUI

idea快捷键速记

到目前为止，我们已经使用PostCSS来完成诸如优化样式表，添加用于预处理的功能以及生成某些类命名约定之类的事情，但是它仅对编写普通CSS有什么帮助呢？

普通的Web设计师在他们的职业生涯中输入了很多代码，因此，如果您只花一点点时间就可以得到，那么最终总会增加很多。

在本教程中，我们将使用PostCSS通过一系列快捷方式和速记添加来减少每天的代码键入时间。让我们开始！

设置您的项目

现在，您将熟悉此过程，但是首先需要做的是将项目设置为使用Gulp或Grunt。如果您还不喜欢其中一种，那么我建议您使用Gulp，因为您将需要更少的代码来达到相同的目的，因此您应该发现使用起来更加简单。

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

分别。

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

安装插件

在本教程中，我们将安装几个插件，每个插件处理不同类型的快捷方式或速记。

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

npm install postcss-alias postcss-crip postcss-font-magician postcss-triangle postcss-circle postcss-all-link-colors postcss-center postcss-clearfix postcss-position postcss-size postcss-verthorz postcss-color-short --save-dev

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

通过Gulp加载插件

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

var alias = require('postcss-alias');
var crip = require('postcss-crip');
var magician = require('postcss-font-magician');
var triangle = require('postcss-triangle');
var circle = require('postcss-circle');
var linkColors = require('postcss-all-link-colors');
var center = require('postcss-center');
var clearfix = require('postcss-clearfix');
var position = require('postcss-position');
var size = require('postcss-size');
var verthorz = require('postcss-verthorz');
var colorShort = require('postcss-color-short');

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

var processors = [
    	alias,
		crip,
		magician,
		triangle,
		circle,
		linkColors,
		center,
		clearfix,
		position,
		size,
		verthorz,
		colorShort
  ];

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

通过Grunt加载插件

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

processors: [
          require('postcss-alias')(),
          require('postcss-crip')(),
          require('postcss-font-magician')(),
          require('postcss-triangle')(),
          require('postcss-circle')(),
          require('postcss-all-link-colors')(),
          require('postcss-center')(),
          require('postcss-clearfix')(),
          require('postcss-position')(),
          require('postcss-size')(),
          require('postcss-verthorz')(),
          require('postcss-color-short')()
        ]

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

好了，现在您的插件都已安装完毕，让我们学习如何将其用于CSS快捷方式和速记。

为属性使用简写

我们必须在CSS中一遍又一遍地键入很多属性。当然，一次键入几个字符所需的时间很小，但是经过多年的发展，所有这些都加起来了。我们将在这里查看两个插件，这些插件可让您将这些属性缩减为简写版本，以便在锤击CSS时获得快速流畅的流程。

定义自己的简写

通过Sean King的postcss-alias插件，您可以为要缩写的任何属性定义自己的缩写或“别名”。这使您可以确保所使用的速记方式与您的思维方式相吻合，从而使您容易记住。

要定义一些别名，请在样式表顶部使用@alias {...}语法添加一个规则。然后在规则内通过添加alias-name: property-name;设置别名alias-name: property-name; 。

将以下示例添加到您的“ src / style.css”文件中，该文件将为border-size ， border-style和border-color属性设置别名：

@alias {
    bsz: border-size;
	bst: border-style;
	bcl: border-color;
}

然后添加以下代码以使用新别名进行测试：

.set_border {
    bsz: 1px;
	bst: solid;
	bcl: #ccc;
}

编译文件，在“ dest / style.css”文件中，您现在应该看到：

.set_border {
    border-size: 1px;
	border-style: solid;
	border-color: #ccc;
}

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

即插即用速记

如果您想使用许多属性简写，但又不想自己定义每个属性的步骤，则可以查看Johnie Hjelm的postcss-crip插件，该插件具有数百个可用于插件的属性缩写，并且玩玩。

例如，将以下代码添加到“ src / style.css”文件中，该文件包含margin-top ， margin-right ， margin-bottom和margin-left属性的简写：

.crip_shorthand {
    mt: 1rem;
	mr: 2rem;
	mb: 3rem;
	ml: 4rem;
}

编译代码，您应该看到扩展的属性出现在“ dest / style.css”文件中：

.crip_shorthand {
    margin-top: 1rem;
	margin-right: 2rem;
	margin-bottom: 3rem;
	margin-left: 4rem;
}

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

并在以下位置查看属性缩写的完整列表： https : //github.com/johnie/crip-css-properties

在一行中输出@ font-face

Jonathan Neal的postcss-font-magician插件非常符合其名称。它使您可以通过简单的font-family规则来使用自定义字体，就好像您使用的是标准字体一样，该字体也可以神奇地工作。

将以下代码添加到“ src / style.css”文件中：

body {
  font-family: "Indie Flower";
}

而已。这就是利用postcss-font-magician所要做的全部。不需要特殊的语法，只需像使用其他字体一样使用字体名称即可。

在这种情况下， Indie Flower字体是我从Google字体库中选择的一种。我尚未在项目中添加任何自定义字体文件，因此该插件会看到该字体，而是去检查我的指定字体是否可从Google字体获取。当发现可用时，它将完全自动创建适当的@font-face代码。

编译文件，然后查看“ dest / style.css”文件，您将在其中看到以下代码：

@font-face {
    font-family: "Indie Flower";
	font-style: normal;
	font-weight: 400;
	src: local("Indie Flower"),local(IndieFlower),
		url(//fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nZ2MAKAc2x4R1uOSeegc5U.eot?#) format("eot"),
		url(//fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format("woff2"),
		url(//fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format("woff");
}

您可以通过在“目标”文件夹中创建一个名为“ index.html”的新文件并添加以下代码来检查字体是否正确加载：

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

<h1>Test Heading</h1>
	
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium bibendum nisl. Mauris eget orci eget nisi tristique lobortis. Pellentesque rutrum id ligula quis tempus. Vivamus tempus, justo at semper volutpat, lorem justo tincidunt urna, in mattis lorem dolor condimentum diam. Ut dapibus nunc auctor felis viverra posuere. Aenean efficitur efficitur nisi. Vivamus leo felis, semper quis rutrum eu, eleifend eu quam.</p>

</body>
</html>

要加载字体，您需要通过https://地址而不是file://地址查看此文件，因此可以将文件上传到网络主机或使用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”文件中：

.circle {
    circle: 8rem #c00;
}

编译它，您将看到以下代码添加到“ dest / style.css”文件中：

.circle {
    border-radius: 50%;
	width: 8rem;
	height: 8rem;
	background-color: #c00;
}

现在，将此HTML添加到上一部分中创建的“ dest / index.html”文件中：

<div class="circle"></div>

在浏览器中重新查看文件，现在应该看到一个红色圆圈：

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

添加三角形

您可以使用此插件添加三种三角形：等腰，等腰和等边。每一种都有略有不同的语法集，您可以在插件的Github repo上全面了解它们。

我们将添加一个等腰三角形，其语法为：

triangle: pointing-<up|down|left|right>;
width: <length>;
height: <length>;
background-color: <color>;

让我们将此示例等腰三角形添加到“ src / style.css”文件中：

.isosceles-triangle {
    triangle: pointing-right;
	width: 7rem;
	height: 8rem;
	background-color: #c00;
}

编译文件，您现在应该在“ dest / style.css”文件中看到完整的三角形CSS：

.isosceles-triangle {
    width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	border-width: 4rem 0 4rem 7rem;
	border-left-color: #c00;
}

要在“ dest / index.html”文件中看到三角形，请添加以下html：

<div class="isosceles-triangle"></div>

在浏览器中刷新此文件时，现在应该看到一个指向右边的红色等腰三角形：

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

对常用任务使用快捷方式

设置链接样式

为链接设置颜色是每个项目中必须完成的工作，并且需要为默认链接以及四种不同的链接状态设置样式。杰德·毛（Jed Mao）的postcss-all-link-colors插件可让您简化该过程，一次输出所有链接的颜色。

将以下内容添加到“ src / style.css”中：

a {
    @link-colors all #4D9ACC;
}

然后编译文件，您将看到已设置所有必需的链接状态：

a {
    color: #4D9ACC;
}

a:visited {
	color: #4D9ACC;
}

a:focus {
	color: #4D9ACC;
}

a:hover {
	color: #4D9ACC;
}

a:active {
	color: #4D9ACC;
}

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

将您刚刚添加到“ src / style.css”文件中的代码更新为以下代码：

a {
    @link-colors all #4D9ACC {
		hover: #5BB8F4;
	}
}

现在，当您进行编译时，您会看到悬停状态的颜色与其余样式不同：

a {
    color: #4D9ACC
}

a:visited {
	color: #4D9ACC;
}

a:focus {
	color: #4D9ACC;
}

a:hover {
	color: #5BB8F4;
}

a:active {
	color: #4D9ACC;
}

在以下网址了解有关postcss-all-link-colors的更多信息： https ： //github.com/jedmao/postcss-all-link-colors

垂直或水平居中

垂直居中或水平居中是CSS开发人员永恒的难题之一。杰德·毛（Jed Mao）的postcss-center插件通过引入top: center;使该任务变得更加简单top: center; 垂直居中， left: center; 用于水平居中。

将此代码添加到您的“ src / style.css”文件中：

.centered {
  top: center;
  left: center;
}

然后编译它，您将看到以下代码：

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

注意：居中使用绝对定位，因此您需要将居中元素与使用相对，绝对或固定定位的父对象一起包装。考虑到绝对定位的元素不会影响其父元素的高度或宽度，您还需要设置适合其父元素的高度和宽度。

例如，添加left: center; 到您之前创建的.circle类，因此它将水平居中：

.circle {
    circle: 8rem #c00;
	left: center;
}

然后添加第二个类，充当圆形的包装，为其提供相对位置和与圆形匹配的高度：

.circle_wrap {
    position: relative;
	height: 8rem;
}

现在添加一个带有该类的元素作为您现有的html的包装器：

<div class="circle_wrap">
    <div class="circle"></div>
</div>

当您返回并刷新页面时，您应该看到您的圆圈已水平居中：

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

一行输出Clearfix

在任何包含浮点的设计中，创建clearfix类非常方便，以至于几乎是必不可少的。肖恩·金（Sean King）的postcss-clearfix插件通过将fix添加为可与clear属性一起使用的可能值，从而将该clearfix样式创建为单行作业。

对于适用于IE8 +的clearfix，请将以下内容添加到您的“ src / style.css”文件中：

.clearfixed {
  clear: fix;
}

编译时，您会看到它已经生成了以下clearfix代码，可供使用：

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

如果您需要适用于IE6 +的clearfix，请使用值fix-legacy而不是plain fix ，如下所示：

.clearfixed_legacy {
  clear: fix-legacy;
}

编译此代码后，您会看到它包含一些额外的内容，使其对旧版浏览器友好：

.clearfixed_legacy:before,
.clearfixed_legacy:after {
    content: '';
	display: table;
}

.clearfixed_legacy:after {
	clear: both;
}

.clearfixed_legacy {
  zoom: 1;
}

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

设置一行中的位置

如果要使用非默认定位，即absolute ， fixed或relative ，则必须手动输入元素的top ， right ， bottom和left定位的值。在一行中设置边距或填充时，没有可用的速记方式。也就是说，直到您安装了Sean King的postcss-position插件。

使用此插件，在使用position属性时，在设置了absolute / fixed / relative值之后，您可以在同一行中声明top ， right ， bottom和left值。

将以下示例代码添加到“ src / style.css”文件中：

.absolute {
    position: absolute 1rem 1rem 0 0;
}

编译后，您会看到速记已编译为通常必须手动键入的单独的行。

.absolute {
    position: absolute;
	top: 1rem;
	right: 1rem;
	bottom: 0;
	left: 0;
}

声明这些值的方式与margin或padding速记中的模式相同，即，您也可以在第一个值中设置顶部和底部，然后在第二个值中设置右侧和左侧，或者可以设置一个值以应用于所有四个。

例如，尝试以下代码：

.fixed_two_values {
    position: fixed 2rem 1rem;
}

.relative_one_value {
	position: relative 3rem;
}

您应该看到它可以编译成：

.fixed_two_values {
    position: fixed;
	top: 2rem;
	right: 1rem;
	bottom: 2rem;
	left: 1rem;
}

.relative_one_value {
	position: relative;
	top: 3rem;
	right: 3rem;
	bottom: 3rem;
	left: 3rem;
}

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

一次设置宽度和高度

Andrey Sitnik的postcss-size插件可让您将常用的width和height属性压缩为单个size属性。您可以通过两种方式使用它：传递两个值，第一个传递给width，第二个传递给height，或者传递一个将用于width和height的值。

通过将以下CSS添加到“ src / style.css”文件中来进行测试：

.size_a {
    size: 1rem 2rem;
}

.size_b {
    size: 1rem;
}

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

.size_a {
    width: 1rem;
	height: 2rem;
}

.size_b {
    width: 1rem;
    height: 1rem;
}

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

设置垂直和水平间距

作为高效编码的忠实爱好者，在写出通常在两侧相等的边距和填充时，我经常发现自己希望有一种快捷方式可以立即声明垂直和水平间距。我什至写了一些预处理器混合器来做到这一点。但是由于David Hemphill的postcss-verthorz插件，我不再需要那些mixins。

使用此插件，您可以使用padding-vert或margin-vert设置垂直间距，并使用padding-horz或margin-horz设置水平间距。将以下示例代码添加到“ src / style.css”文件中，以查看其工作原理：

.spacing {
    padding-vert: 1rem;
	margin-horz: 2rem;
}

编译后，您会看到这些规则已扩展为完整的填充和边距声明。

.spacing {
    padding-top: 1rem;
	padding-bottom: 1rem;
	margin-left: 2rem;
	margin-right: 2rem;
}

您也可以通过将其缩写为两个字母来进一步简化这些属性。我们上面使用的示例代码可以缩写为以下内容，并且输出将完全相同：

.spacing_short {
    pv: 1rem;
	mh: 2rem;
}

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

输出颜色代码

我最喜欢的默认文本颜色是#232323 ，我不知道是否只有我，但是我厌倦了一次又一次地敲击相同的两位数。我经常希望有一个快捷方式，类似于将#ffffff缩小为#fff 。有了Andrey Polischuk的postcss-color-short插件，就可以了。

使用此插件时，如果您设置了两位数字的颜色代码，则这些数字将重复出现，直到创建了六位数字的代码为止，例如#23将变为#232323 。如果您设置一个数字的颜色代码，它将重复到直到三位数字为止，例如#f将变为#fff 。您甚至可以使用它来设置rgba()颜色，其中传递的第一个数字将重复3次，第二个用作alpha值，例如rgba(0, 0.5)将变为rgba(0, 0, 0, 0.5) 。

将以下内容添加到“ src / style.css”文件中，以尝试上述所有方法：

.short_colors {
    color: #23;
	background: #f;
	border-color: rgba(0, 0.5);
}

编译后，您将看到所有颜色均已以完整格式输出：

.short_colors {
    color: #232323;
	background: #fff;
	border-color: rgba(0, 0, 0, 0.5);
}

在以下网址了解有关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;提供垂直和水平居中top: center; left: center;
postcss-clearfix插件可让您输出带有clear: fix; clearfix代码clear: fix;
postcss-position插件允许您在使用position属性的过程中添加top ， right ， bottom和left设置
postcss-size插件可让您一次设置宽度和高度
postcss-verthorz插件允许使用单个规则输出水平间距和垂直间距。
postcss-color-short插件使您能够使用一位和两位数的十六进制代码以及其他颜色快捷方式。

在下一个教程中

在下一个教程中，我们将介绍一些很棒的插件，但不要落入任何特定类别。我很快就会在“杂项商品”中与您见面。

翻译自: https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-shortcuts-and-shorthand--cms-24602

idea快捷键速记

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
idea快捷键速记_PostCSS深入探究：快捷方式和速记

到目前为止，我们已经使用PostCSS来完成诸如优化样式表，添加用于预处理的功能以及生成某些类命名约定之类的事情，但是它仅对编写普通CSS有什么帮助呢？普通的Web设计人员在他们的职业生涯中输入了很多代码，因此，如果您每次只能花一点点时间，那么最终总会增加很多。在本教程中，我们将使用PostCSS通过一系列快捷方式和速记添加来减少每天的代码键入时间。让我们开始！设置您的项目...
复制链接

扫一扫