compass sass_Sass教程：使用Sass和Compass构建在线电子名片

今天我们将继续关于Sass 的讨论 ，这将是Sass系列的最后一部分。 这一次，而不是理论上的方法，这将更加实用。 我们将使用Sass和Compass创建一个在线电子名片 。

这个想法是，vCard的颜色和大小应该易于调整。 在此过程中，我们将使用一些Sass和Compass功能，例如变量，混合，操作，选择器继承，嵌套规则和Compass帮助器 。 如果您错过了本系列的前几篇文章，建议您先阅读一下，然后再继续。

规划和线框图

与Sass和Compass一起使用时， 规划至关重要 。 我们通常需要对最终结果（例如页面或网站）的状态有一个总体了解。 浏览某些网站（例如Behance或Dribbble）以获取想法将很有帮助。 然后，我们可以将想法起草到纸上或将其构建在线框中，如下面的示例所示。

从上图可以看到，我们的vCard包含有关“ John”的联系信息 -图片资料，有关John的一些信息，例如他的姓名，电子邮件地址，电话号码以及有关他是谁或做什么的简短描述。 那将是我们的“生物”部分。

以下是他以社交按钮形式的社交身份。 这将是我们的“社交”部分。

准备资产

在开始编码之前，这里有一些必要的准备工作。 我认为到现在为止，您应该在计算机中安装了Sass和Compass。

（如果不确定是否已安装它们，则可以通过命令提示符或终端运行此命令sass -v或compass -v ，或者，如果喜欢使用GUI，则可以始终使用Scout App之类的应用程序 。）

我们还将需要一些资产，例如字体图标和社交媒体图标，您可以从ModernPictograms之类的地方获得这些资产 。

最后，由于本教程使用命令提示符/终端，因此我们需要导航到目录并使用以下两个命令运行Compass项目：Compass compass init和Compass compass watch 。

HTML标记

下面是我们vCardHTML标记，非常简单。 所有部分都包装在逻辑HTML5标记 <section> 。

<div class="vcard">
<section class="bio cf">
	<img src="images/me.jpg" width="80" height="80">
	<div class="detail">
		<ul>
			<li class="name">Thoriq Firdaus</li>
			<li class="email">me@email.com</li>
			<li class="phone">(+62)1.2345.678.9</li>
			<li class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend at pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.</li>
		</ul>
	</div>
</section>
<section class="social cf">
	<ul>
		<li class="social-facebook"><a href="#">Facebook</a></li>
		<li class="social-twitter"><a href="#"> Twitter</a></li>
		<li class="social-google"><a href="#">Google+</a></li>
		<li class="social-dribbble"><a href="#">Dribbble</a></li>
	</ul>
</section>
</div>

如上所见，“社交”中包含的社交身份 部分是由列表元素构成的，因此我们可以轻松地并排显示它们。 每个人都有一个遵循该约定的类名social-facebook ， social-twitter ， social-google等。

指南针配置

我们需要通过取消注释config.rb文件中的几行来对Compass进行一些配置，如下所示：

# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

如果找不到config.rb文件，则可能尚未在项目目录中运行此命令compass init 。

导入文件

由于我们将使用指南针，因此需要使用导入；

@import "compass";

我个人喜好从浏览器重置默认样式，以便输出将更一致地呈现。 在这种情况下，指南针具有重置模块 。 该模块基于Eric MeyerCSS重置 ，可以使用导入；

@import "compass/reset";

但是，我更喜欢使用Normalize ，值得庆幸的是，它也采用Sass / Scss格式 。 在此处下载文件 ，将其保存在sass工作目录中，然后将其导入到我们的样式表中。

@import "normalize";

变数

我们肯定在样式表中会有一些常量值，因此我们将它们存储在变量中，下面的这两个变量将定义vCard的基本颜色。

$base: #fff;
$dark: darken($base, 10%);

下面的$width变量将是页面的宽度； 它也将是定义其他元素大小的基础。

$width: 500px;
$space: $width / 25; // = 20px

如您所见， $space变量将是我们vCard中的默认间距或列大小，在此示例中为20px ；

指南针还提供了帮助程序来检测图像大小，我们将在图片资料中使用此功能，如下所示；

$img: image-width("me.jpg") + (($space / 4) * 2);

上面代码中的(($space / 4) * 2)的额外加法是计算总图像宽度，包括将要构图的边框。 框架通常具有两个侧面。 顶部和底部/左侧和右侧 ，这就是为什么我们将除法结果乘以2 。

选择器继承

显然，我们的样式表中有一些选择器具有相同的样式规则。 为了避免代码重复，我们首先需要指定这些样式，并在需要时使用@extend指令继承它们。 在Sass中，此方法称为选择器继承 ，这是LESS中缺少的一个非常有用的功能。

.float-left {
	float: left;
}
.box-sizing {
	@include box-sizing(border-box);
}

款式

设置完所有必要的内容之后，就该开始设置vCard的样式了，从我们HTML文档的背景色开始；

html { 
	height: 100%;
	background-color: $base;
}

电子名片

以下样式定义了vCard包装器。 如果您以前使用过LESS，则此代码将为您所熟悉并且易于理解。

.vcard {
	width: $width;
	margin: 50px auto;
	background-color: darken($base, 5%);
	border: 1px solid $dark;
	@include border-radius(3px);
	ul {
		padding: 0;
		margin: 0;
		li {
			list-style: none;
		}
	}	
}

包装器的宽度继承了$width变量的值。 背景颜色比基础颜色暗5% ，而边框颜色则暗10% 。 使用Sass颜色功能可以实现此着色。

vCard还将具有3px的圆角半径，这是使用Compass CSS3 Mixins实现的； border-radius(3px) 。

生物科

正如我们在本教程前面提到的那样，vCard可以分为两个部分。 下面的这些嵌套样式将定义第一部分，其中包含带有一些详细信息（姓名，电子邮件和电话）的图片配置文件。

.bio {
	border-bottom: 1px solid $dark;
	padding: $space;
	@extend .box-sizing;
	img {
		@extend .float-left;
		display: block;
		border: ($space / 4) solid #ffffff;
	}
	.detail {
		@extend .float-left;
		@extend .box-sizing;
		color: darken($base, 50%);
		margin: {
			left: $space;
			bottom: $space / 2;
		}
		width: $width - (($space * 3) + $img);
		li {
			&:before {
				width: $space;
				height: $space;
				margin-right: $space;
				font-family: "ModernPictogramsNormal";
			}
			&.name:before {
					content: "f";
			}
			&.email:before {
					content: "m";
			}
			&.phone:before {
					content: "N"; 
			}
		}
	}
}

上面的代码中有一件事，我们认为您需要注意。 .detail选择器中的宽度由以下公式指定： $width - (($space * 3) + $img); 。

这个等式用于动态计算细节的width减去图像文档的宽度和从所述电子名片总宽度的空间（padding和margin）。

社会科

以下样式适用于vCard的第二部分。 实际上，这里的普通CSS实际上没有什么区别，只是现在它们是嵌套的，并且一些值是用变量定义的。

.social {
	background-color: $dark;
	width: 100%;
	padding: $space;
	@extend .box-sizing;
	ul {
		text-align: center;
		li {
			display: inline-block;
			width: 32px;
			height: 32px;
			a {
				text-decoration: none;
				display: inline-block;
				width: 100%;
				height: 100%;
				text-indent: 100%;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
}

在本节中，我们将使用图像精灵技术显示社交媒体图标，并且Compass具有可以更快地完成此工作的功能。

首先，我们需要将图标放置在一个特殊的文件夹中，例如，将其命名为/ social / 。 返回样式表，将这些图标与以下@import规则连接起来。

@import "social/*.png";

上面的“ social/指的是我们存储图标的文件夹。 该文件夹应嵌套在图像文件夹中。 现在，如果我们在image文件夹中查看，应该会看到一个由随机字符生成的sprite图像，例如social-sc805f18607.png 。 在这一点上，直到我们在下一行应用样式之前，前端仍然没有任何React。

@include all-social-sprites;

最后结果

最后，经过所有的辛苦工作，我们现在可以看到如下结果：

如果以后我们认为500px太宽，我们只需要更改$width变量中的值（例如350px ），其余的将“神奇地”调整。 您还可以尝试使用color变量。

• 观看演示
• 下载源

结论

在本教程中，我们向您展示了如何使用Sass和Compass构建简单的在线电子名片。 但是，这只是一个例子。 Sass和Compass确实功能强大，但有时没有必要。 例如，当我们在一个只有几页的网站上工作并且可能也只需要较少的样式行时，使用Sass和Compass被认为是多余的。

这篇文章关闭了我们的Sass系列，希望您喜欢它。 如果您对此主题有任何疑问，请不要在下面的评论框中添加。

翻译自: https://www.hongkiat.com/blog/sass-compass-vcard/