Sass Mixins——支持Retina的Icons Sprite

发布于 大漠

本文由大漠根据的《Sass Mixins Icons Sprite with Retina Support》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://themestent.github.io/retina-icon-sprites,以及作者相关信息

——作者:

——译者:大漠

Retina雪碧图标——在你的网站上前端人员可以很容易使用Sass Mixins自动生成。不过你需要在项目中安装Sass和Compass才能正常使用。

根据设置步骤你可以设置你自己的Compass。如果你想实现自动化和完全控制你自己的开发资源,我强烈建议您阅读后面的“扩展细节”。

容易整合

让我们先从一个非常简单的例子来发解如何使用它。如果你已经下载了包,你会发现一个food-icons.css文件在你的目录中。并且有18张图片在你的img/food-icons在目录中。你也会找到两个目录名为120和64,两种都包含两个其他的子目录中生成的图像,用于正常显屏和Retina显屏。我们将向您展示如何生成的细节以及扩展细节。

首先让我们看看使用图标的地方的HTML标签和CSS命名约定。你可以在任何元素上添加这些生成图标。我建议使用一个<span>元素,如下所示:

<!-- 首先在你网站的<head>内调用css文件 -->
<link rel="stylesheet" href="css/food-icons.css" >
<!-- 使用<span>标签制作一个lemon图标 -->
<span class="icon-lemon" aria-hidden="true"></span>
<!-- 上面的类名定义了lemon图标.这里的图标的命名约定-'yourfoodname' -->
<a href="#"><span class="icon-lemon" aria-hidden="true"></span>Lemon Icon</a>

用于这个包,这是所有你需要使用的18套图标。你可以找到18个图标,类名取了icon-name

Sass Mixins——支持Retina的Icons Sprite

扩展细节

你熟悉SassCompass吗?在你的网站上创建支持Retina屏幕的“Food icon”会变得更容易。ThemesTent Framework中有一个Retina图标的Sass Mixins包中包含了一个自定义的Sass(Scss) Mixins。在你定义的目录中,可以使用Retina mixins自动生成和管理Sprites图。接下来一步一步的指导你如何生成图标和如何使用Sass Mixins。

下载和安装

下载

GitHub下载克隆文件包。如果你正在使用命令终端,你可以按下面的步骤操作:

创建新目录和克隆文件库

### 创建新文件夹 ###
mkdir icon-sprite
### 进入新创建的文件夹 ###
cd icon-sprite
### 克隆文件库 ###
git clone git@github.com:themestent/retina-icon-sprites.git

克隆下来后,文件中包含文件结构如下图所示。

Sass Mixins——支持Retina的Icons Sprite

安装

如果你的文件包下载或克隆成功后,在你的目录中可以看到一个命名为food-icons-sprites目录。在这个目录中包含一个config.rb文件,用来完成Compass配置。你也可以看到一个package.jsonGruntfile.js文件,用来运行几个自动执行任务

在这个例子中,你可以使用watch compassLiveReload在浏览器中修改你的任何文件。它还包括了一个名为bash的脚本文件INSTALL.sh(Windows用户请阅读下面的相关说明)。我们首先需要先运行这个bash脚本创建必要的环境,以便CompassGrunt任务管理器和其他必要的安装包程序才能正常运行。

请确认您的系统中安装了最新版本的Node.js(最新版本是0.8)。你可以点击 这里下载Node.js安装包。我强烈建议您阅读安装包里面的“如何安装Node.js”的内容。

好的,在你的系统中已安装好了Node.js。好极了!现在我们可以运行简单的一行命令,就可以开始安装。它将包括必要的包,以及前端任务需要的一些管理组件。

特别注意:Windows用户,在Windows上运行“Bash”脚本,你可以下载并安装。

安装需要的包

### 进入文件夹 ###
cd icon-sprite
### 运行Bash脚本 ###
bash INSTALL.sh
## 安装成功后,你会看到下面的信息 ###
'*****************************************';
'*****************************************';
'*********   PACKAGE SETUP DONE   ********';
'*****************************************';
#### 准备启动Grunt任务管理器 ###
#### 在你的终端运行`grunt-server` ###
grunt server

如果运行bash INSTALL.sh有部分功能安装失败,建议在您的终端输入sudo bash INSTALL.sh命令。

运行命令后,Grunt会运行一系列的繁重的任务。你可以看到下面的一些信息。

Grunt开始处理

Running "clean:server" (clean) task
Running "coffee:dist" (coffee) task
Running "compass:server" (compass) task
Running "livereload-start" task
... Starting Livereload server on 35729 ...
Running "connect:livereload" (connect) task
Starting connect web server on localhost:9090.
Running "open:server" (open) task

Running "watch" task
Watching app/js/{,*/}*.coffee
Watching test/spec/{,*/}*.coffee
Watching app/css/sass/{,*/}*.{scss,sass}
Watching app/{,*/}*.html,{.tmp,app}/css/{,*/}*.css,{.tmp,app}/js/{,*/}*.js,app/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}

你的浏览器会自动运行下面的地址:http://localhost:9090/。如果没有自动打开,你可以点击那个链接地址。Grunt会用localhost:9090连接Web服务器。此外在app目录中修改了任何HTMLcss.js文件,浏览器将重新加载他们。

使用ImageMagic创建自己的图标

当运行了INSTALL.shbash脚本,“ImageMagick”已在你的系统上安装好了。在终端输入几个命令,我们可以很轻松的截取图片的大小,转找成我们需要的任何格式的图片。

在这个包中有18张512 X 512的图片。他们放在/img/food-icons/original。在food-icons目录中你可以找到两个文件夹64120。把original目录中的.png文件合并为64 X 64120 X 120两个文件,并放置在dimensional。为了支持Retina屏幕每张图片需要一个放大两倍尺寸的图片。为了更有条理性,我创建了两个64120两个文件夹,将其命名为normalretina。现在我们回到我们的终端。

特别注意:别忘了替换你的目录文件地方“~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/normal”。

调整图像

cd app/img/food-icons/original
for file in *.png; convert $file -resize 120x120 -quality 100 ~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/normal/$file
for file in *.png; convert $file -resize 240x240 -quality 100 ~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/retina/$file

如果一切顺利,你将会将所有的图片放在这个正确的目录中。我们可以继续Sass和CSS部分。

包括Sass Mixins和Sprite生成器

生成我们需要的精灵图片在我们站点上展示,我已经创建了两个不同的Scss文件和导入了需要的Scss文件。

支持Retina屏的Sass Mixins

正如前面提到的一个自定义的Sass Mixins用来创建支持Retina显屏的雪碧图。在app/css/sass目录中,你可以找到_retina-sprite-mixins.scss文件。

Sprite Retina Mixins(_retina-sprite-mixins.scss)

// Retina Sprite Mixins

@mixin retina-sprite-background($name,$normal,$retina){
  background-repeat: no-repeat;
  background-image: sprite-url($normal);
  background-position: sprite-position($normal,$name);
  height:image-height(sprite-file($normal, $name));
  width: image-width(sprite-file($normal, $name));

  // Media Query for retina
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {

          background-image: sprite-url($retina);
          background-position: 0 round(nth(sprite-position($retina, $name), 2) / 2);
          height:round(image-height(sprite-file($retina, $name)) / 2);
          width: round(image-width(sprite-file($retina, $name)) /2 );

          // treat the @2x retina sprite sheet as 50% wide for double resolution upon display
          $double-width:ceil(image-width(sprite-path($retina)) / 2);
          $auto-height:auto;
          @include background-size($double-width $auto-height);
         }
}

生成雪碧图

food-icons.scss文件中导入_retina-sprite-mixins.scss文件,用来创建生成雪碧图。并且根据食物的图标名称为每个图标指定类名。下面是所有代码片段:

食物雪碧图(food-icons.scss)

@import "compass/css3";
@import "compass/typography";

/* Core Variables & Mixins */
@import "variables";
@import "mixins";
@import "retina-sprite-mixins";

/* Bourbon */
@import "bourbon/bourbon";
//  Food Icons

$food-icon-normal: sprite-map("food-icons/120/normal/*.png");
$food-icon-retina: sprite-map("food-icons/120/retina/*.png");

[class^="icon-"],
[class*=" icon-"]{
  display: block;
  @include size(120);
}

.icon-beer{
  @include retina-sprite-background(beer,$food-icon-normal,$food-icon-retina);
}
.icon-berry{
  @include retina-sprite-background(berry,$food-icon-normal,$food-icon-retina);
}
.icon-bone{
  @include retina-sprite-background(bone,$food-icon-normal,$food-icon-retina);
}
.icon-bowl{
  @include retina-sprite-background(bowl,$food-icon-normal,$food-icon-retina);
}
.icon-burger{
  @include retina-sprite-background(burger,$food-icon-normal,$food-icon-retina);
}

特别注意:你可能有一个好的想法,在retina-sprite-background() mixins中通过icon的名称如何传入参数。不过这些图标每个图标的尺寸需要相同的高度和宽度。另外制作两个sprite-map。一个是用于正常显屏,另一个是针对于Retina显屏。

每个图标的CSS

所以,到了这里!这意味着你完成上面的步骤没有问题。如果运行没有问题,你需要为每个食物图标准备一个CSS的类名,下面的示例是生成“啤酒图标”的CSS:

生成Retina样式

/* Beer Icon Class */
.icon-beer {
  background-repeat: no-repeat;
  background-image: url('../img/food-icons/120/normal-s8778c84cbc.png');
  background-position: 0 -360px;
  height: 120px;
  width: 120px; }
  @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .icon-beer {
      background-image: url('../img/food-icons/120/retina-s7367f0e004.png');
      background-position: 0 -480px;
      height: 120px;
      width: 120px;
      -webkit-background-size: 120px auto;
      -moz-background-size: 120px auto;
      -ms-background-size: 120px auto;
      -o-background-size: 120px auto;
      background-size: 120px auto; }
  }

这是所有你需要做的。容易对吗?我很确定你可能有意见或问题,在使用这个Sass mixins。如果你有任何问题,可以将你的问题提交到GitHub上。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

英文原文:http://themestent.github.io/retina-icon-sprites/

中文译文:https://www.fedev.cn/preprocessor/retina-icon-sprites.html

Air Max 90 LTHR Suede