雪碧图制作-Compass安装

简介: 雪碧图制作-Compass安装

雪碧图制作可以有其他工具,自己试了试Compass。

如果要安装Compass,需要先安装Ruby环境。

下载Ruby:

下载链接:http://rubyinstaller.org/downloads/

我的是win8 64位系统,因此选用的是RubyInstallers系列:

安装Ruby:

注意:

1. 安装路径选择全英路径,否则出错可能性大。

2. 安装过程中勾选 Add Ruby executables to your PATH 。

注意到以上两点,然后一直点下一步即可。

检查是否安装成功:

运行-cmd-enter,输入 ruby -v

如果输出版本号即安装成功,如图:

安装sass:

输入gem install sass

出现如图信息,则安装成功,如图:

安装Compass:

输入gem install compass

如果出现如下信息,则安装成功,如图:

错误排除:

在安装过程中,一开始跳过了sass的安装,直接安装compass了。遇到了这样的错误:error:while executing gem…(Gem::RemoteFetcher::FetchError)

翻译了一下,Remote Fetcher,Fetch Error就是远程提取,程序提取错误。还没找到原因,就找到了另外一篇介绍安装过程的步骤。试了试,问题就解决了。

工具安装好了,接下来试试用Compass制作雪碧图了。


相关文章
|
8月前
|
JavaScript 前端开发 Windows
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
|
1月前
如何下载网页中的视频成mp4格式
如何下载网页中的视频成mp4格式
|
Web App开发 XML 编解码
Logo小变动,心境大不同,SVG矢量动画格式网站Logo图片制作与实践教程(Python3)
曾几何时,SVG(Scalable Vector Graphics)矢量动画图在坊间称之为一种被浏览器诅咒的技术,只因为糟糕的硬件支持(IE),和没完没了的兼容性调优(Safari)。但是在2022年的今天,一切都不一样了,正所谓三十年河东,三十年河西,微软所研发的采用Chromium内核作为IE替代者的Edge浏览器已经有望超越Safari成为第二大桌面浏览器,而曾经因为不支持关键帧动画被人诟病的Safari也统一了标准,市面上除了老帮菜IE,几乎所有平台(包括移动端)都已经对SVG足够友好,这让我们可以放心大胆的在网站上应用SVG矢量动画图。
Logo小变动,心境大不同,SVG矢量动画格式网站Logo图片制作与实践教程(Python3)
|
编解码 前端开发 搜索推荐
Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来
在之前的几篇文章中,介绍了业界中比较火爆的图片技术SVG(Scalable Vector Graphics),比如[Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统](https://v3u.cn/a_id_143),我们可以使用svg来打造精美炫酷的分享小图标(icon),这一次我们使用python来将普通的静态的网站logo图片转换为带路径(path)的svg图片,这样就可以让网站logo能够变成动态的,作为一名不折腾不舒服斯基,一枚炫酷自带动画的网站logo自然能够满足我们的折腾欲,同时亦能击中我们的虚荣心。
Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来
|
前端开发
零基础CSS入门教程(8)——CSS设置字体
我们前几个小结学习了,css的选择器,和及基本的改变字体颜色。我们这一小结学习一下设置字体的一些功能(1)font-size这个是设置字体大小,浏览器一般默认字体是16px (2)font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold (3)font-style是设置字体倾斜和html字体倾斜一样效果,倾斜写italic,不倾斜写normal (4)font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了
零基础CSS入门教程(8)——CSS设置字体
小技巧 - 解决 webp 格式图片的快速复制粘贴
小技巧 - 解决 webp 格式图片的快速复制粘贴
646 0
|
关系型数据库
使用path制作各类型动画路径
原文:使用path制作各类型动画路径 ...
806 0
|
前端开发 JavaScript C#
使用 Compass 生成雪碧图
使用 Compass 创建一个项目 要在一个新项目中使用 Compass,可以打开命令行工具并输入如下指令 1 compass create my-project 如果 my-project 目录不存在,上述命令会创建一个叫做 my-project 的目录,并在其中添加以下文件: 如果你没有为compass create命令传递一个目录参数,它将使用你当前所在的目录。
2217 0