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

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

yuyutoo 2024-10-12 00:00 12 浏览 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

相关推荐

VBA中利用Instr函数(vba int函数)

【分享成果,随喜正能量】每一个在你的生命里出现的人,都有原因,喜欢你的人给了你温暖和勇气,你喜欢的人让你学会了爱和自持,你不喜欢的人教会你宽容与尊重,不喜欢你的人让你自省与成长。。...

Insta360 Link体验:支持4K画质,一款使用场景丰富的AI云台摄像头

记者|王公逸伴随直播、线上会议需求的兴起,网络直播的需求愈发增大,8月2日,影石Insta360正式推出全新产品:Insta360Link,这是一款AI智能云台摄像头。从产品形态来说,Insta3...

VBA技术资料MF299:利用Instr进行文本查找

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VB...

Fabric.js 拖放元素进画布 - 掘金

本文简介点赞+关注+收藏=学会了学习Fabric.js,我的建议是看文档不如看demo。本文实现的功能:将元素拖进到画布中并生成对应的图形或图片。效果如下图所示:...

Vue3为什么推荐使用ref而不是reactive

为什么推荐使用ref而不是reactivereactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代optionapi的data的替...

Fabric.js 样式不更新怎么办?(js更改样式)

本文简介带尬猴,我嗨德育处主任不知道你有没有遇到过在使用Fabric.js时无意中一些骚操作修改了元素的样式,但刷新画布却没更新元素样式?如果你也遇到同样的问题的话,可以尝试使用本文的方法。...

Fabric.js 修改画布交互方式到底有什么用?

本文简介点赞+关注+收藏=学会了fabric.js为我们提供了很多厉害的方法。今天要搞明白的一个东西是canvas.interactive。官方文档对canvas.interact...

Rust Web编程:第五章 在浏览器上显示内容

我们现在正处于可以构建一个Web应用程序的阶段,该应用程序可以使用不同的方法和数据管理一系列HTTP请求。这很有用,特别是当我们为微服务构建服务器时。然而,我们也希望非程序员能够与我们的应...

Fabric.js 自由绘制椭圆 - 掘金(canvas画椭圆)

本文简介点赞+关注+收藏=学会了本文讲解在Fabric.js中如何自由绘制椭圆形,如果你还不了解Fabric.js,可以查阅《Fabric.js从入门到精通》。效果如下图所示...

手把手教你实现JS手搓"防抖"优化代码——专业的事用专业的方法!

前言在我们前端编程中,假如我们要给后端发送请求,万一手抖多点了几次,多发送了几遍怎么办?解决方案:防抖!这种事就要交给我们专业的“防抖”先生来处理!今天,我们就来教大家手搓“防抖”...

详解虚拟DOM与Diff算法(虚拟dom一定比实际dom快吗)

vue的虚拟DOM,Diff算法,其中一些关键的地方从别处搬运了一些图进行说明(感谢制图的大佬),也包含比较详细的源码解读。...

走进 React Fiber 的世界(我走进你的世界手势舞视频)

文/阿里淘系F(x)Team-冷卉Fiber设计思想Fiber是对React核心算法的重构,facebook团队使用两年多的时间去重构React的核心算法,在React16以上...

前端新一代框架 Svelte 火了!十个场景带你简单认识它!

近几年听到的主流框架都是Vue、React、Angular,但其实有一个框架在国外非常火,用起来也是很方便,那就是...

借助DeepSeek实现了一个PDF阅读器

1、简介使用pdf.js库加载和显示PDF文件。实现了翻页、缩放功能。提供了基本的错误处理。功能特点:支持选择本地PDF文件。可以逐页查看PDF内容。支持放大缩小功能。界面简洁,易于使...

DeepSeek代码之旅1:卫星地图标记方法之——html语言的实现

最近遇到一个任务,具体功能如下:1、调用高德地图API,图层为卫星图层,根据需要标记兴趣点;2、标记完成后可以保存兴趣点,便于下次加载历史兴趣点。...

取消回复欢迎 发表评论: