Sass的下载、安装以及使用步骤,适合初学者。

1.安装Ruby

Sass是基于Ruby语言来工作的,必须先安装Ruby,然后再安装Sass。
Ruby官网链接:https://rubyinstaller.org/

1.随意选择一个版本
在这里插入图片描述
2.解压后安装
在这里插入图片描述
3.选择(I accept the License) 点击next
在这里插入图片描述
4.勾选点击安装
在这里插入图片描述
5.安装完成,然后通过Ruby安装Sass主要文件依赖
在这里插入图片描述

2.安装sass

6.点击程序运行Ruby窗口,在DOS中输入以下命令:

gem install sass

7.窗口出现以下命令,代表已经安装成功
在这里插入图片描述
8.可以自由查看Ruby版本号,Sass版本号

ruby -v  sass -v

9.sass的具体使用

上一个小案例demo,在磁盘的任何一个位置建一个scss后缀结尾的文件,我就建demo.css了。先在里面随便写点css样式,然后改成后缀以.scss结尾的文件,写样式之前一定先加上@charset "utf-8";不然可能会出现编译失败,乱码的情况

然后在Ruby窗口下切换到自己的创建文件的目录之下,运行以下命令:意思也就是将scss文件编译成css文件

sass demo.scss demo.css 

在这里插入图片描述
10.到此步骤已经将Scss文件成功转化为Css文件了

我们可以看到文件夹中生成了demo.css和demo.css.map文件,以及.sass-cache文件夹(这个是编译的时候自动生成的,可以删除不影响功能),map文件是整个scss的路径,只要scss发生变化直接映射到css文件上面,无需自己去手动编译。我们引入的是demo.css文件。接下来只需监听整个css文件的差异了然后同步编译到demo.css文件上面。

11.Ruby窗口进入demo.scss文件夹下,输入以下命令:

sass --watch demo.scss:demo.css //对当前文件夹下demo.scss监听,并自动编译生成demo.css

出现以下代码提示,就表示已经监听成功了,那么我们在开发工具里试试,随便改动一下代码,看看能否编译自动同步到css里面
在这里插入图片描述
12.ok,此时我们已经看到编译成功了,在对应的css文件中已经同步了scss代码
在这里插入图片描述
到此已经结束了整个编译和同步过程,是不是很方便呢
在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值