百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

可能是史上最易懂的SASS安装教程 sass安装使用的步骤是什么

yuyutoo 2024-10-12 00:00 4 浏览 0 评论

如果文章样式不是很理想,在阅读上带来了很多障碍,有问题可以在下面回复给我,我会一个一个处理,建议头条添加上源码文档

如果你已经进入文章了,那么你可能对SASS有一些了解,或者正在想要学习了解它。本文将带你了解SASS的安装过程:

演示环境:操作系统:window7 64位

SASS是什么?为什么要使用SASS

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

SASS的安装

重要:SASS依赖于ruby环境,所以我们在安装SASS前,先安装ruby

a)首先安装ruby,我这里直接提供ruby的下载地址(尾部),打开页面后会看到如下图

根据自己的环境情况选择对应的版本,我这里测试是选择下载的2.2.3版本的64位安装包。

b)下载完成后,我们直接打开安装程序,选择english,然后点击Ok,再后续的界面选择i accept the license(我接受许可),然后Next(下一步)如下图

c)这里也是我们安装的关键步骤;第一个红色框内是安装路径,第二个是把ruby添加到环境变量中去 选择好自己的安装路径然后点击Install的安装按钮,等待安装完成。

d)完成安装后,打开电脑开始菜单,找到刚才我们安装的ruby


选择Start Command…. 弹出如下窗口

在里面输入 ruby –v回车 查看我们的安装版本,在图中可以看到安装的版本和我们刚才选择的版本一样;还有一种快捷进入方式查看:win+r 打开运行工具在里面输入cmd,后面的操作都一样;不要关闭该窗口!

e)到这里为止我们的ruby安装好了,那么我们可以试着安装SASS,我们继续在使用命令来安装SASS:gem install sass


我们可以看到红色框内有一个ERROR说明我们的安装并不成功在国内的网络并不是很理想;我们可以先来看一下我们的安装源来自于哪里;继续使用命令gem sources –l;我们会看到返回给我们的信息是https://rubygems.org 既然他们不行那么我们来切换它,也是我们的解决方法。

f)解决方案:先清除我们的现在源,在添加国内提供的镜像;使用命令来清除原镜像:gem sources –remov https://rubygems.org 然后添加新的镜像 gem cources –a http://gems.ruby-china.org 然后等待一会儿,成功之后使用再使用命令 gem sources –l 查看源 如果切换成功这时候我们看到的源已经是http://gems.ruby-china.org

g)我们现在再来安装SASS:gem install sass 等待安装,成功之后使用sass –v查看安装的sass版本


到这里我们的SASS已经安装成功。我们来回顾一次整个安装过程首先要了解知道sass是依赖于ruby环境,再安装ruby,在安装过程中注意选择把ruby添加到环境变量中去,安装成功ruby后。安装sass,首先又需要切换国内镜像http://gems.ruby.china.org 然后安装sass :gem install sass

拓展:SASS更新 gem update sass;帮助:sass –h

前面在安装ruby中提到需要把ruby添加到环境变量中去,如果不添加我们在使用命令时候回给我们返回不是内部命令,以至于不能正常的进行下去,所以注意这一点;如果在安装中忘记添加了,我们需要手动添加,这里就不提供方法了,可以上百度,度一度。

其他:在后面会更新SASS的编译与语法。不会很久


ruby下载地址:http://rubyinstaller.org/downloads

相关推荐

史上最全的浏览器兼容性问题和解决方案

微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄(页底留言开放,欢迎来吐槽)●●●...

平面设计基础知识_平面设计基础知识实验收获与总结
平面设计基础知识_平面设计基础知识实验收获与总结

CSS构造颜色,背景与图像1.使用span更好的控制文本中局部区域的文本:文本;2.使用display属性提供区块转变:display:inline(是内联的...

2025-02-21 16:01 yuyutoo

写作排版简单三步就行-工具篇_作文排版模板

和我们工作中日常word排版内部交流不同,这篇教程介绍的写作排版主要是用于“微信公众号、头条号”网络展示。写作展现的是我的思考,排版是让写作在网格上更好地展现。在写作上花费时间是有累积复利优势的,在排...

写一个2048的游戏_2048小游戏功能实现

1.创建HTML文件1.打开一个文本编辑器,例如Notepad++、SublimeText、VisualStudioCode等。2.将以下HTML代码复制并粘贴到文本编辑器中:html...

今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……

  最近的天气暖和得让很多小伙伴们喊“热”!!!  昨天的气温到底升得有多高呢?你家有没有榜上有名?...

CSS不规则卡片,纯CSS制作优惠券样式,CSS实现锯齿样式

之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义CSS变量,自定义主题颜色。布局...

柠檬科技肖勃飞:大数据风控助力信用社会建设

...

你的自我界限够强大吗?_你的自我界限够强大吗英文

我的结果:A、该设立新的界限...

行内元素与块级元素,以及区别_行内元素和块级元素有什么区别?

行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。块级元素:(以下列举比较常...

让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华
让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华

去年的两会期间,习近平总书记在参加人大会议四川代表团审议时,对治蜀兴川提出了明确要求,指明了前行方向,并带来了“祝四川人民的生活越来越安逸”的美好祝福。又是一年...

2025-02-21 16:00 yuyutoo

今年国家综合性消防救援队伍计划招录消防员15000名

记者24日从应急管理部获悉,国家综合性消防救援队伍2023年消防员招录工作已正式启动。今年共计划招录消防员15000名,其中高校应届毕业生5000名、退役士兵5000名、社会青年5000名。本次招录的...

一起盘点最新 Chrome v133 的5大主流特性 ?

1.CSS的高级attr()方法CSSattr()函数是CSSLevel5中用于检索DOM元素的属性值并将其用于CSS属性值,类似于var()函数替换自定义属性值的方式。...

竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使

style="text-align:center;"data-mce-style="text-align:...

学物理能做什么?_学物理能做什么 卢昌海

作者:曹则贤中国科学院物理研究所原标题:《物理学:ASourceofPowerforMan》在2006年中央电视台《对话》栏目的某期节目中,主持人问过我一个的问题:“学物理的人,如果日后不...

你不知道的关于这只眯眼兔的6个小秘密
你不知道的关于这只眯眼兔的6个小秘密

在你们忙着给熊本君做表情包的时候,要知道,最先在网络上引起轰动的可是这只脸上只有两条缝的兔子——兔斯基。今年,它更是迎来了自己的10岁生日。①关于德艺双馨“老艺...

2025-02-21 16:00 yuyutoo

取消回复欢迎 发表评论: