欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

sass菜鸟教程_html/css_WEB-ITnose

程序员文章站 2022-04-24 09:24:06
...

1、安装sass

在安装sass前需要安装ruby,下载ruby时要注意自己电脑是32位还是64位,下载好正常安装,但注意一下:要勾选下图这一项,添加环境变量(安装过JDK的朋友应该知道环境变量)

下一步、下一步。。。安装完成后,开始菜单点击:

输入命令:gem install sass 。我猜你会看到安装失败的提醒:

因为默认的sass下载地址https://rubygems.org/被墙了,所以无法连接安装,ping了一下可看到:

可我“翻”了一下“墙”,发现还是不能成功安装,只好作罢,换一个下载地址,淘宝的:https://ruby.taobao.org/ 。 ping一下正常:

接下来要做的就是添加国产淘宝的地址,并把默认被墙掉的地址删除,输入命令: gem sources -a https://ruby.taobao.org/添加淘宝地址:

提示信息有added to sources表示添加成功,可运行命令:gem sources 查看现有的下载地址:

现有两个,一个是默认的,一个是刚添加的淘宝的,必须要把默认的删掉才能安装,运行命令删除默认:gem sources -r https://rubygems.org/ 提示removed from sources 说明删除成功。

确保只有一个淘宝的地址,才能成功安装sass:

好,这时可以放心的运行 gem install sass 来安装了:

Perfect!

2.把scss文件编译为css文件

先新建一个.scss文件吧,代码:(虽然sass代码刚写起来生硬,但相信代码还是能看懂啥意思的)

.box {  background: #eee;  border: 2px solid #ccc;  .heading {    font-size: 14px;  }}.box2 {  @extend .box;  padding: 10px;}

我这里保存为test.scss文件,然后用命令行进入保存文件的所在目录(我的是E盘ts文件夹下),然后运行翻译命令: sass test.scss test.css 把test.scss文件编译为test.css文件(css文件名可以重新取名):

这时再返回文件所在文件夹,你会发现多出了一些文件,其中就有我们想要的test.css文件:

打开test.css文件我们会看到编译好的css代码,对比编译前scss文件源代码可看出sass的厉害之处啦:

.box, .box2 {    background: #eee;    border: 1px solid #ccc;}.box .heading, .box2 .heading {    font-size: 2em; }.box2 {    padding: 10px; }/*# sourceMappingURL=test.css.map */

当然了你也可以把css文件编译为scss文件,输入命令: sass -convert test.css newtest.scss 就能把test.css编译为newtest.scss文件啦,这里就不再赘述。下面就是要学习sass语法的时候了,我也是初学者,共同进步吧。

相关标签: sass菜鸟教程