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

麹正业

2023-12-01

compass sass

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

总览

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

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

响应式设计
HTML5标记
使用SASS和Compass预处理器CSS
使用Google的网络字体服务进行排版
jQuery从Dribbble的API获取数据
跨浏览器，响应式，水平滚动轮播，支持触摸交互（不使用javascript）
使用免费的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);

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

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

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

总览

步骤1：创建项目根

步骤2：入门标记

步骤3：使用Compass设置CSS

安装指南针

为新项目设置指南针

您的新SASS和CSS目录

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

编译您的SASS文件

注意：自动编译

在HTML中包含样式表

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

步骤6：创建标题

标头：标记

基本样式

H1标签

标头元素

步骤7：创建Dribbble Content Carousel

标记

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

创建一个JavaScript文件并加载jQuery

设置变量

从Dribbble的API获取JSON

循环搜索结果并生成HTML

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

水平溢出内容

水平排列镜头

创建蒙版

步骤10：创建页脚

样式页脚

步骤11：完善 CSS

步骤12：添加图标字体

选择您的图标

生成和下载图标

文件概要

将字体合并到网页中

步骤13：样式图标

添加品牌色彩

结论

相关阅读

相关文章

相关问答

相关文档