sass菜鸟教程

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语法的时候了，我也是初学者，共同进步吧。