可能是史上最易懂的SASS安装教程 sass安装使用的步骤是什么
yuyutoo 2024-10-12 00:00 6 浏览 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
相关推荐
- YAML配置文件简介及使用(yaml 配置)
-
简介YAML是"YAMLAin'taMarkupLanguage"(YAML不是一种标记语言)的缩写。相比JSON格式的方便。...
- 教你如何解决最常见的58种网络故障排除方法
-
1.故障现象:网络适配器(网卡)设置与计算机资源有冲突。分析、排除:通过调整网卡资源中的IRQ和I/O值来避开与计算机其它资源的冲突。有些情况还需要通过设置主板的跳线来调整与其它资源的冲突。2.故障现...
- 一分钟带你了解服务器网卡(服务器网卡怎么用)
-
今天小编和大家聊一下服务器的网卡。什么是网卡?简单说网卡就是计算机与局域网互连的设备。计算机主要通过网卡接入网络。网卡又称为网络适配器或网络接口卡NIC(NetworkinterfaceCard)...
- linux文件之ssh配置文件的含义与作用
-
ssh远程登录命令是操作系统(包括linux和window系统)下常用的操作命令,可以帮助用户,远程登录服务器系统,查看,操作系统相关信息。linux系统对于ssh命令有专门保存其相关配置的目录和文件...
- Cilium 官方文档翻译 - IPAM(二)Kubernetes Host模式
-
KubernetesHostScopeciliumIPAM的kuberneteshost-scope模式通过选项ipam:kubernetes开启,将集群IP地址分配委托给每个独立的节点,并...
- 域名劫持跳转,域名劫持跳转的解决办法只需5步
-
简单来说,域名劫持就是把原本准备访问某网站的用户,在不知不觉中,劫持到仿冒的网站上,例如用户准备访问某家知名品牌的网上商店,黑客就可以通过域名劫持的手段,把其带到假的网上商店,同时收集用户的ID信息和...
- Linux 磁盘和文件系统管理(linux磁盘管理fdisk)
-
1检测并确认新硬盘...
- windows host文件怎么恢复?局域网访问全靠这些!
-
windowshost文件怎么恢复?windowshost文件是常用网址域名及其相应IP地址建立一个关联文件,通过这个host文件配置域名和IP的映射关系,以提高域名解析的速度,方便局域网用户使用...
- Nginx配置文件详解与优化建议(nginx 配置详解)
-
1、概述今天来详解一下Nginx的配置文件,以及给出一些配置建议,希望能对大家有所帮助。...
- Mac电脑hosts文件锁定,如何修改hosts文件权限
-
有时候我们需要修改hosts文件,但是网上很多教程都行不通,使用sudo命令也不行。其实有一个很简单的方法。打开终端命令行,使用如下命令即可:sudochflags-hvnoschg/etc/...
- windows电脑如何修改hosts文件?(windows 修改hosts文件)
-
先来简单说下电脑host的作用hosts文件的作用:hosts文件是一个用于储存计算机网络中各节点信息的计算机文件;作用是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中...
- Vigilante恶意软件行为怪异:修改Hosts文件以阻止受害者访问盗版网站
-
Sophos刚刚报道了一款名叫Vigilante的恶意软件,但其行为却让许多受害者感到不解。与其它专注于偷密码、搞破坏、或勒索赎金的恶意软件不同,Vigilante会通过修改Hosts文件...
- hosts文件无法修改几种现象和解决方法
-
第一种、hosts文件修改完不是直接保存而是弹出另存为窗口解决:1、右击hosts文件——属性——把“只读”前面勾去掉。第二种、打开hosts文件时提示“你没有权限打开该文件,请向文件的所有者或管理员...
- hosts文件位置在哪里,教你hosts文件位置在哪里
-
Hosts是一个没有扩展名的系统文件,其基本作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文件中寻找对应的I...
你 发表评论:
欢迎- 一周热门
-
-
前端面试:iframe 的优缺点? iframe有那些缺点
-
带斜线的表头制作好了,如何填充内容?这几种方法你更喜欢哪个?
-
漫学笔记之PHP.ini常用的配置信息
-
其实模版网站在开发工作中很重要,推荐几个参考站给大家
-
推荐7个模板代码和其他游戏源码下载的网址
-
[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗
-
正在学习使用python搭建自动化测试框架?这个系统包你可能会用到
-
织梦(Dedecms)建站教程 织梦建站详细步骤
-
2024PHP在线客服系统源码+完全开源 带详细搭建教程
-
【开源分享】2024在线客服系统PHP源码(安装教程+全新UI)
-
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)