compass sass_使用Sass和Compass建立自适应的单页投资组合

compass sass

这些天来创建网站有很多事情要做。 我们现在正在使用HTML5，CSS预处理程序，API，自定义排版等来构建网站。 我们的设计挑战包括响应式架构，分辨率独立性和多设备交互支持。 在本文中，我们将构建一个涵盖所有这些技术各个方面的页面组合。

---

总览

让我们首先看一下我们将要创建的东西：

这是一个可定制的，响应式的单页网站，其中包含现代Web开发技术，其中包括：

1. 响应式设计
2. HTML5标记
3. 使用SASS和Compass预处理器CSS
4. 使用Google的网络字体服务进行排版
5. jQuery从Dribbble的API获取数据
6. 跨浏览器，响应式，水平滚动轮播，支持触摸交互（不使用javascript）
7. 使用免费的iconmoon.io字体生成器的图标字体

---

步骤1：创建项目根

首先，我们将从创建项目的根文件夹和默认的index.html文件开始。

---

步骤2：入门标记

让我们启动并运行一些基本HTML。 使用以下内容：

<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>

如果您不确定，我们正在做的是：

• 视口元标记，用于响应式设计
• 来自Google CDN的html5 shiv； 允许较旧的浏览器（IE）支持现代HTML5元素

---

步骤3：使用Compass设置CSS

为了构建我们CSS，我们将使用Compass 。 如果您不熟悉Compass，则可能会在Compass上找到Webdesigntuts +的文章有用且有益。 在本教程中，我将使用一些简单的终端命令来启动和运行Compass。 如果这使您不舒服，则可以使用GUI Compass.app进行调查，以启动SCSS项目。

安装指南针

要开始使用指南针，您可以按照Compass网站上的说明进行操作 。 或者，我现在将向您展示简单的步骤。

Compass要求您安装Ruby （如果在Mac上，则预装在Lion中）。 一旦安装了Ruby，只需从终端运行以下命令：

$ gem update --system
$ gem install compass

为新项目设置指南针

现在，我们要为新项目设置指南针。 为此，我们将从终端运行一个简单的命令。 导航到网页的目录（我的目录称为“ mySite”，它位于我的“ Sites”文件夹中，因此我输入cd ~/Sites/mySite/ ）。 现在运行以下命令：

compass create

指南针刚刚创建了一个新项目。 它可能会在终端中输出一堆信息。 现在不用担心。

注意 ：您可以通过传入其他参数来配置罗盘及其目录结构，例如： compass create --sass-dir "css"或编辑confib.rb文件。 为了简单起见，我们将使用Compass的默认目录结构。

您的新SASS和CSS目录

现在，在Compass创建的项目的根目录中，有了一些新文件/文件夹。 这些包括：

• 带有.scss文件的“ sass”文件夹
• 带有常规.css文件的“ stylesheets”文件夹
• 包含指南针配置信息的“ config.rb”文件

Compass的工作方式是在“ sass”目录中获取SASS格式的.scss文件，对其进行处理，然后将其作为“样式表”目录中的常规浏览器可读.css文件输出。

我们不会使用罗盘创建的任何默认文件，因此请继续删除“ sass”和“ stylesheets”目录中的所有文件。

---

步骤4：创建第一个SASS和CSS文件

现在要启动并运行Compass，让我们创建第一个.scss文件。

在“ sass”目录中，创建一个名为style.scss的文件。 确保其具有“ .scss”扩展名，否则罗盘不知道如何对其进行编译。 现在在该文件中键入以下内容：

@import "compass/reset";
@import "compass/css3";

body {
    color: #333;
}

这是我们在此SASS文件中执行的操作：

• @import "compass/reset"正在导入Compass模块，该模块将包含一些CSS来重置浏览器的默认值（就像为默认边距，标题大小，填充等添加CSS重置一样）
• @import "compass/css3"正在导入一个Compass模块，该模块将包括mixins（我们将在后面介绍），用于编写带有供应商前缀的跨浏览器CSS3规则
• body是我们的第一个自定义CSS规则。

编译您的SASS文件

要编译您的SASS代码，请转到终端并导航至您的站点所在的位置（同样，我的文件夹位于我的“ Sites / mySite”文件夹中，因此我运行cd ~/Sites/mySite/ ）。 然后运行以下命令：

compass compile

这会将名为style.scss的SCSS文件编译为浏览器可读的常规CSS格式，将其命名为style.css ，并将其复制到“ stylesheets”目录中。 您可以在“ stylesheets”文件夹中查找并打开新编译的“ style.css”文件。 您会看到许多CSS重置，并且在文件末尾会看到我们编写的body {color: #333} 。 不错的工作！ 您已启动Compass并开始运行！

注意：自动编译

compass compile只编译你的.scss文件一次。 每次保存文件时都必须在终端中键入compass compile ，这很痛苦。 因此，如果您要进行很多工作，那么（从项目目录中）运行compass watch可能是个好主意。 这将监视您的SASS目录，如果发生任何更改，它将自动重新编译CSS。 现在，每次保存“ style.scss”时，“ style.css”文件都会自动重新编译！

在HTML中包含样式表

现在，您只需要将我们的样式表链接到我们HTML文档即可。 在您的<head>标记之间添加以下代码：

<link href="stylesheets/style.css" type="text/css" rel="stylesheet" >

---

步骤5：使用Google Web字体设置字体

我们将使用Google Web字体 ，以便在我们的网站中使用潜在的非本地字体。

实现非常简单。 首先，我们需要选择一种字体。 我选择“苦味”作为标题。

点击字体操作下的“添加到收藏集”：

字体将被添加到您的收藏中。

现在单击“使用”，以便我们学习如何使用我们在网页中选择的字体：

我正在计划使用斜体和普通版本的字体。 因此，让我们选中该字体的斜体复选框。

Google为您提供了多种在网页中使用字体的选项。 我们将使用“标准”方法。 这是最简单的方法，并使用Google的托管服务来提供字体。

将此代码段添加到文档的<head>中。

<link href="http://fonts.googleapis.com/css?family=Bitter:400,400italic" rel="stylesheet" type="text/css" >

完善！ 现在，要使用该字体，我们要做的就是在CSS字体堆栈中声明字体的名称，如下所示：

h1 {
    font-family: Bitter, Georgia, serif;

    /* if you want to use the italic version */
    font-style: italic;
}

---

步骤6：创建标题

因此，我们在这里为我们的项目做了很多设置。 我们已经有了基本HTML页面结构，已经使用Compass构建了CSS设置，并且已经将排版设置从Google的Web字体加载。 现在，让我们开始为页面元素创建标记。

标头：标记

我们将创建页面标头，该标头将包含两个组件：头像和简介。

<header class="header">
    <img src="images/avatar.png" width="100" height="100" class="avatar" />
    <h1>Hello, I'm Jim Nielsen. <br />I'm a designer living in NYC.</h1>
</header>

为了创建头像，我创建了一个200x200像素的图像，并在标记中将其大小调整为100x100。 这将使视网膜设备的图像清晰。 图像本身应该只是一个正方形。 我们将使其变圆并使用CSS添加装饰性功能。 现在，您应该具有以下简单内容：

基本样式

在专门设计标题之前，我们将设置一些基本的页面样式：

// Basic Page Styles
body {
    text-align: center;
    font: 1em/1.5 Georgia, serif;
    color: #333;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

在这里，我们只是设置一些常规页面样式，例如居中对齐的文本，字体大小，响应图像和未加下划线的链接。 您可能还使用//注意到了我们的评论。 在普通CSS中，您必须像这样单行注释： /* this is a single line comment */ 。 但是在SASS中，您可以使用// 。 您的页面应如下所示：

注意：如果您的页面看起来不是这样，那可能是因为您没有重新编译样式表！ 您可以重新阅读第4步，其中涉及使用指南针编译样式表。

H1标签

让我们设置<h1>标记的样式，因为我们将在HTML文档的每个部分中使用它们。

h1 {
    font-family: Bitter, Georgia, serif;
    font-size: 2.25em;
    padding: 0 1em;
}

请注意，我们使用的是Google字体中的Bitter字体系列。 这将使我们所有主要标题的样式相同。 现在，我们在层次结构中有了主要标题，好吧，主要！

标头元素

现在让我们为标头添加一个间距，一个分隔符，并在标头中将H1设置为斜体：

// Header
.header {
    padding: 10em 0 14em;

    h1 {
        font-style: italic;
    }
}

注意我们如何嵌套CSS规则？ 这是CSS预处理器的基础。 处理CSS时，嵌套选择器会以其父项为前缀。

// What it looks like in SASS
.header {
    padding: 10em 0 14em;

    h1 {
        font-style: italic;
    }
}

// What the output looks like in CSS
.header {
    padding: 10em 0 14em;
}
.header h1 {
    font-style: italic;
}

还记得我曾说过如何使用CSS设置头像样式吗？ 让我们现在开始：

.avatar {
    @include box-shadow(0 0 0px 3px #fff, 0 0 0 4px #ccc, 0 4px 6px #333);
    @include border-radius(50px); // half the avatar size
    width: 100px;
    height: 100px;
}

您可能想知道@include代码是什么？ 这是一个指南针CSS3 mixin 。 本质上，它采用您提供CSS规则，并将它们与所需的所有CSS3浏览器前缀一起输出。 因此，您无需为不同的浏览器键入多种类型的规则，只需编写一次即可，其余全部由Compass负责！ 不再有-webkit-box-shadow ， -moz-box-shadow等。这是一个示例：

// What you write with Compass
@include border-radius(50px);

// What it outputs in CSS
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px

快速提示 ：使用SASS，您可以使用变量管理CSS颜色值。 假设您在CSS的十个不同位置使用#000 。 如果要将其更改为#333 ，则必须在使用它的所有位置进行查找和更改。 使用变量，您只需要在一个地方进行更改即可！ 查阅SASS文档以了解更多信息。

现在，您应该具有以下内容：

由于我们使用了CSS3规则，因此在旧版浏览器中看起来会有所不同。 但是，您仍然可以看到基本的方形头像。 因此，我们在逐步增强方面做得很好。

---

步骤7：创建Dribbble Content Carousel

现在，让我们创建我们的主要内容。 我们将在这里创建一个水平滚动的轮播，该轮播使用纯HTML和CSS来实现功能强大的设备上基于触摸的交互。

标记

我们将使用Dribbble的内容填充我们的轮播。 因此，要实现这一点，让我们从此内容的标记开始。

<section class="content">
    <h1 class="dribbble">Latest Dribbbles</h1>

    <div class="carousel">
        <div class="shots-container">
            <ul class="shots">
                <li><img src="images/loading.gif" alt="Loading" /></li>
            </ul>
        </div>
        <span class="mask mask-right"></span>
        <span class="mask mask-left"></span>
    </div>

    <p>&amp;larr; scroll to view &amp;rarr;</p>
</section>

让我们看看我们在这里做什么：

• 为我们的主要内容创建一个部分，并为其提供标题。
• 为我们的轮播创建一个<div> 。 这将容纳用于Dribbble镜头的容器以及我们将在转盘的每一侧应用的渐变蒙版。 这些遮罩将产生以下效果：当用户滚动时，内容将在视口的侧面消失。
• 将默认的“正在加载”图像放入“运球”列表中。 一旦我们使用javascript加载所有图像，它将被替换
• 添加“滚动查看”指示，以使用户可以轻松滑动/滚动容器中的内容。

我们将提供部分基本样式的基本内容：

---

步骤8：使用Javascript从Dribbble获取内容

借助jQuery和Dribbble的API，从Dribbble加载用户照片JavaScript实际上非常简单。

创建一个JavaScript文件并加载jQuery

由于我们使用的是jQuery，因此我们将从Google的CDN中加载它。 我们还将创建一个新的javascript文件，在其中放入将要编写的自己的javascript。 因此，在结束<body>标记之前添加以下脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="javascripts/dribbble.js"></script>

设置变量

现在，在我们的“ dribbble.js”文件中，让我们开始编写脚本。 让我们从一些简单的注释开始，并声明我们将要使用的两个变量：

/*
 * LOAD DRIBBBLE SHOTS
 *
 * This script uses Dribbble's API
 * to fetch the latest shots
 * from a specified Dribbble user
 */

// What user are we using?
var dribbbleUsername = 'jimniels';

// Variable to hold the HTML we'll generate
var html = '';

注意我们的两个变量：

• dribbbleUsername是我们要获取的人员内容的Dribbble用户名（在这种情况下，我们只是使用我的）
• html是我们将存储将要生成并插入DOM中的标记的位置

从Dribbble的API获取JSON

现在，我们将使用getJSON从Dribbble的API请求我们需要的信息

// Load the shots via Dribbble's API
$.getJSON("http://api.dribbble.com/players/"+ dribbbleUsername +"/shots?callback=?", function(data) {
    // Do something with the result here
});

在这里，我们向Dribbble的API发出请求。 注意，我们正在请求URL中插入变量dribbbleUsername 。 这是在告诉Dribbble我们想要一堆指定用户的镜头。 Dribbble的API将处理请求，并返回一堆存储在data函数回调中的JSON。

如果您实际上是在浏览器中访问该链接， 则将看到Dribbble的API返回什么 。

令人费解的文本包含我们生成用户最近的Dribbbles列表所需的所有信息！ 现在我们只需要解析它。

循环搜索结果并生成HTML

现在，我们已经使用所有这些JSON告诉我们用户的最新照片是什么，我们将遍历它并获取我们需要的东西。 JSON包含大量信息，但我们仅需要以下键的值：

• 拍摄的图片网址： url
• 拍摄名称： image_url
• 拍摄网址： title

如果运行Dribbble通过格式化程序返回的JSON（例如JSONLint ），您将获得更多可读性。 这将使您轻松查看Dribbble返回的每个键/值对。 那就是我们挑选想要的值的地方。

Dribbble每次拍摄都返回了所有这些信息！ 现在，我们只需遍历每个镜头，获取所需的值，并生成一个HTML列表。 看一下这个示例标记。 这是我们希望为每个镜头生成的，其中星号表示我们从JSON获得的键值：

<li>
    <a href="**url**">
        <img src="**image_url**" alt="**title**" />
    </a>
</li>

因此，让我们运行循环。 我们将获得Dribbble返回的十张最新照片：

// how many shots we're displaying on the page
var numberOfShots = 10;

// Loop over the results, generating the HTML for each <li> item
for (i=0; i<numberOfShots; i++) {
    html += '<li>';
    html += '<a href="'+ data.shots[i].url +'">';
    html += '<img src="' + data.shots[i].image_url + '" alt="'+ data.shots[i].title +'" />';
    html += '</a>';
    html += '</li>';
}

// Insert the generated HTML to the DOM
$('.shots').html(html);

您看到我们在那里做了什么吗？ 这是我们正在做的：

1. 创建一个变量numberOfShots ，该变量定义我们将在页面上显示多少个运球镜头（for循环将运行多少次）
2. 运行for循环，获取变量html并连接所有我们需要HTML，以获取Dribbble的镜头列表
3. 将生成的列表标记插入到我们拥有“正在加载”占位符的DOM中

您现在应该有类似这样的内容，它可以在单个页面上列出所有镜头：

---

第9步：设置滴丸转盘的样式

现在我们在标记中包含了所有Dribbble镜头，我们想要为轮播创建CSS。

水平溢出内容

如前所述，我们将创建一个可水平滚动的容器，该容器将响应移动设备上基于触摸的交互。 因此，让我们开始使用以下CSS

.carousel {
    position: relative;
}

.shots-container {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding: 1em 0;
}

在这里，我们对.carousel进行了相对定位，因为我们要绝对将面具放置在该容器内。 另外，如果您还记得， .shots-container是我们的Dribbble镜头列表的容器。 这将是响应Webkit浏览器中基于触摸的交互的容器。 -webkit-overflow-scrolling: touch规则（如果支持）将在触摸设备上提供本机滚动。 这将比javascript所能提供的任何东西都平滑得多。 通过将我们在x轴上的溢出设置为水平滚动，我们可以创建超出其容器的可滚动内容。

水平排列镜头

现在我们有了一个水平内容的容器，我们需要水平排列所有Dribbble镜头。 这是一大段代码，但是不用担心，我们将继续介绍它：

.shots {
    overflow: hidden;
    margin: 0;
    padding: 0 2%;
    /*
     * Shot width = 400px + 20px margin + 20px padding + 2px border
     * 442 * 10 (# of shots)
     */
    width: 4420px;
    min-height: 300px;

    @media screen and (max-width: 450px) {
        /*
         * Shot width = 300px + 20px margin + 20px padding + 2px border
         * 342 * 10 (# of shots)
         */
        width: 3420px; /* 340 * 10 */
        min-height: 250px;
    }

    li {
        float: left;
        width: 400px;
        height: 300px;
        margin: 0 10px;
        padding: 10px;
        background: #fff url(images/loading.gif) 100px 50% no-repeat;
        border: 1px solid #ddd;
        @include border-radius(3px);

        @media screen and (max-width: 450px) {
            width: 300px;
            height: 225px;
        }
    }
}

这是我们正在使用CSS进行的操作。 首先，我们给.shots一个固定的宽度。 此固定宽度将超出浏览器的视口。 但是，由于我们将其父级设置为可滚动，因此用户将能够滚动屏幕上溢出的内容。

您会注意到.shots宽度是根据其子项的宽度计算的

• 元素。 在上述情况下，每个镜头都有以下设定的大小：
  • 宽度（400像素）
  • 页边距（每边10像素，共20像素）
  • 填充（每侧10像素，共20像素）
  • 边框（每边1像素，共2像素）

  这意味着每个<li>元素的总宽度为442像素，并且由于其中有十个，因此父元素的宽度必须为4420像素。 您会注意到，我们将每张照片的尺寸缩小为移动尺寸（因为400px的带球拍摄不适合宽度为320px的移动设备）。 因此，我们使用断点调整了.shots容器及其子元素<li> 。

  其他一些注意事项：我们为.shots li了一个加载图像背景，因此用户知道如果页面加载时间很长，我们正在尝试检索数据。 同样， .shots上的左右填充也是我们的蒙版要去的地方。 到目前为止，这是您应该拥有的：

  您会看到运球照片从屏幕上消失了，但可以通过滚动进行访问。 如果将它们加载到iPhone之类的设备上，则可以使用本机滑动交互来滚动轮播！

  创建蒙版

  如标记中所述，我们有两个<span>元素将充当屏幕左右边缘的遮罩。 这将有助于在视觉上暗示屏幕上还有更多内容，用户应尝试滚动。 这是我们CSS：

  .mask {
      position: absolute;
      top:0;
      width: 4%;
      height: 100%;
  }
  .mask-left {
      left: 0;
      @include background( linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0)) );
  }
  .mask-right {
      right: 0;
      @include background( linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)) );
  }

  注意，我们使用了Compass的css3渐变混合来创建渐变。 然后，我们将它们绝对定位在其父.carousel内部。 看到他们在屏幕上消失时如何轻轻隐藏内容？

  ---

  步骤10：创建页脚

  现在开始创建页脚。 首先，我们将从标记开始

  <footer class="footer">
      <h1>Find Me on the Web</h1>
      <p>You can contact or follow me via any of these services:</p>
      <ul class="social">
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Instagram</a></li>
          <li><a href="#">Google Plus</a></li>
          <li><a href="#">Youtube</a></li>
          <li><a href="#">Dribbble</a></li>
      </ul>
  </footer>

  您将获得一些基本样式，没有任何样式，例如：

  样式页脚

  让我们为页脚提供一些基本样式。

  .footer {
      p {
          color: #777;
          padding: 0 1em;
      }
  }

  ---

  步骤11：完善 CSS

  让我们通过添加一些CSS来稍微完善一下样式：

  .header,
  .footer {
      background: #f7f7f7;
  }
  
  .content,
  .footer {
      padding: 4em 0 6em;
  }
  
  .content {
  
      border-top: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9;
  
      h1 {
          color: #ea4c89; // dribbble brand color
      }
  
      > p {
          font-size: .85em;
          color: #aaa;
      }
  }

  太好了，现在您应该具有以下内容：

  ---

  步骤12：添加图标字体

  现在，我们想向页脚中的每个链接添加图标。 因为我们希望图标不依赖分辨率，而且还可以在较旧的浏览器中使用，所以我们将使用图标字体技术 。

  为了简化此操作，我们将使用图标字体生成器服务icomoon

  选择您的图标

  访问icomoon应用 。 您会看到一堆免费提供的图标，可以选择将其包含在字体中。

  现在，我们只需要找到我们正在使用的每个社交服务的图标即可。 因为这些都是常见的服务，所以有免费的图标供我们使用。 值得注意的是，如果您需要使用自己的图标作为字体的一部分，icomoon允许您上传矢量图标并将其包含在字体中（尽管本教程中不会介绍）。 这是我们将要使用的图标列表：

  • 脸书
  • 推特
  • Instagram的
  • Google Plus
  • 的YouTube
  • 运球

  找到每个并选择它。 找到所有这些文件后，单击应用程序底部的“生成”

  生成和下载图标

  点击“生成”后，您将进入一个页面，您可以在其中查看所选的所有图标。 看起来像这样：

  至此，您将概述将以您的字体生成的图标。 icomoon还为您提供了各种自定义选项； 但是，目前我们不会使用它们中的任何一个。 只需继续下载您的字体即可。

  文件概要

  如果您解压缩下载的文件，则会发现各种文件。

  以下是我们所拥有的概述：

  • index.html这是一种演示页面，它为您提供了下载图标的概述，有关每个图标的信息以及有关其用法的有效演示
  • lte-ie7这是一个JavaScript文件，如果您希望IE6和IE7支持图标字体，则可以在HTML中添加它（我们不会这样做）
  • /fonts此文件夹包含打包为字体的我们的图标。 字体文件格式多种多样，因为不同的浏览器需要不同的格式
  • style.css此文件具有开始使用图标字体所需CSS代码。 我们将从这里复制代码

  您应该将/fonts文件夹移至网站的根目录，因为这些字体是我们将提供给浏览器的资产。

  将字体合并到网页中

  我们将使用CSS伪类方法将图标带入我们的网页。 因此，如果我们查看图标随附的style.css文件，则每个图标都有各种CSS类。 我们需要将这些添加到我们的<li>元素中，如下所示：

  <li class="icon-facebook"><a href="#">Facebook</a></li>
  <li class="icon-twitter"><a href="#">Twitter</a></li>
  <li class="icon-instagram"><a href="#">Instagram</a></li>
  <li class="icon-google-plus"><a href="#">Google Plus</a></li>
  <li class="icon-youtube"><a href="#">Youtube</a></li>
  <li class="icon-dribbble"><a href="#">Dribbble</a></li>

  现在有了标记，我们将使用CSS导入自定义字体。 我们将从图标字体随附的style.css中借用这些样式。

  @font-face {
      font-family: 'icomoon';
      src:url('../fonts/icomoon.eot');
      src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
          url('../fonts/icomoon.woff') format('woff'),
          url('../fonts/icomoon.ttf') format('truetype'),
          url('../fonts/icomoon.svg#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
  }

  注意：由于我们是从下载的文件中复制/粘贴，因此必须通过添加../来更改指向字体的url()引用。

  现在，我们将为每个图标复制并粘贴CSS

  // Shared styles
  .icon-facebook:before,
  .icon-twitter:before,
  .icon-instagram:before,
  .icon-google-plus:before,
  .icon-youtube:before,
  .icon-dribbble:before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
  }
  // Individual characters
  .icon-facebook:before {
      content: "\e000";
  }
  .icon-twitter:before {
      content: "\e001";
  }
  .icon-instagram:before {
      content: "\e002";
  }
  .icon-google-plus:before {
      content: "\e003";
  }
  .icon-youtube:before {
      content: "\e004";
  }
  .icon-dribbble:before {
      content: "\e005";
  }

  icomoon为我们生成了所有这些代码，但是这里简要介绍了正在发生的事情：

  • 第一段代码为每个图标声明共享样式
  • 每个图标都需要一个相应的类，该类使用content规则来声明浏览器应使用的字体字符。 本质上，字符\e000对应于字体文件中的facebook图标。 \e001到Twitter图标，等等。

  您的图标现在应该显示，没有任何特殊样式：

  ---

  步骤13：样式图标

  现在，我们将根据每种服务的品牌颜色来设置图标样式。 让我们开始给我们的图标留一些间距。

  .social {
      margin:2em 0;
      font-family: Helvetica, Arial, sans-serif;
  
      li {
          position: relative;
          @include inline-block();
          margin: .5em;
          @include transition(all .15s ease);
  
          &:hover {
              @include scale(1.25);
              color: white;
          }
  
          &:before {
              position: absolute;
              width: 2em; /* center align technique, give width, negative half margin */
              margin-left: -1em;
              top: 1.5em;
              left: 50%;
          }
  
          a {
              display: block;
              color: inherit;
              padding: 2.5em 1em 1em;
              width: 6em;
              // allow truncation if needed
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
          }
      }
  }

  这是我们在这里所做的概述：

  • <li> -我们正在使用罗盘mixin inline-block() ，它将为跨浏览器对inline-block定位的支持输出一些良好CSS。 我们还将设置CSS过渡规则（使用Compass mixin）以获得一些不错的悬停效果，我们将添加一些效果。
  • &:hover我们使用指南针mixin scale(1.25) ，它将转换为transform: scale(1.25); 带有正确的浏览器前缀。 此规则将稍微放大悬停时的图标和链接，以实现良好的UI交互。
  • &:before我们将图标（如果您还记得的话，将其使用:before伪元素显示在链接文本上方）
  • <a> -我们将每个链接设置为一个设置宽度的块。 如果链接到的服务名称很长，我们还将添加对文本截断的支持

  现在，您应该具有以下内容：

  添加品牌色彩

  现在，我们只想为我们的服务添加一些颜色。 我们想要将品牌颜色添加到每个图标及其文本。 别忘了，我们将添加一个悬停交互。 当用户将鼠标悬停在服务上时，我们将稍微放大文本和图标（使用我们刚刚插入的scale(1.25) CSS），同时反转颜色。 因此背景变成商标颜色，而文字和图标变成白色。 因此，我们需要为每个品牌设置颜色：

  /* Twitter */
  .icon-twitter {color: #00a0d1}
  .icon-twitter:hover {background:#00a0d1}
  /* Instagram */
  .icon-instagram {color: #634d40}
  .icon-instagram:hover {background: #634d40}
  /* Facebook */
  .icon-facebook {color: #3b5998}
  .icon-facebook:hover {background: #3b5998}
  /* Twitter */
  .icon-google-plus {color: #db4a39}
  .icon-google-plus:hover {background: #db4a39}
  /* Twitter */
  .icon-dribbble {color: #ea4c89}
  .icon-dribbble:hover {background: #ea4c89}
  /* Twitter */
  .icon-youtube {color: #c4302b}
  .icon-youtube:hover {background: #c4302b}

  如前所述，您甚至可能想要为这些颜色设置变量，以充分利用Sass的功能。

  而已！ 现在，您应该具有以下内容：

  ---

  结论

  现在，您知道了一些用于构建现代网页的技术，例如：

  希望您在此过程中学到了一些东西。 随意进一步自定义此页面，然后将其设为您自己的！

• 翻译自: https://webdesign.tutsplus.com/tutorials/build-a-responsive-single-page-portfolio-with-sass-and-compass--webdesign-10734

  compass sass