sass简单入门学习

首先安装sass,先要下载ruby,因为sass是基于ruby做的开发;

ruby地址下载链接,我用的是Ruby2.3.3这个版本

安装ruby的时候记得勾选 Add Ruby executables to your PATH，直到 Ruby 安装程序完成 Ruby 安装为止。如果您的安装没有适当地配置环境变量，接下来您可能需要进行环境变量的配置。

安装完ruby之后,cmd终端执行,

ruby -v

如果有版本号就说明安装成功了。之后通过命令行安装:

gem install sass

安装完成之后

sass -v

查看下版本号如果和ruby的版本号一样就成功了，此刻安装工作环境工作就准备好了。

下面就可以进行开发了,下面在编辑器中建立一个开发的文件夹，我用的编辑器是sublime text 3,在使用sublime之前,要先安装sass的插件,不会的自行百度安装。没有sass和scss的格式支持,开发将无法识别进行转译。

我的个人文件目录,仅供参考

在sass文件夹中建立style.scss文件

body{        font-size: 15px;        color: blue;        line-height: 1;     }

style.scss写完之后，cmd中进入代码根目录文件夹；我的根目录文件集是E:\liwei-sass,在此目录执行命令(下面做个特别的演示，以防止你弄错目录，后面的目录和以下的一样，就不做重复操作了)

E:\liwei-sass>sass sass/style.scss:sass/style.css

此时css文件夹中就会生成一个style.css的代码，就是由scss文件编译好的css文件。（提个醒：编译之前css文件夹是空的，执行上面的命令之后，会自动生成对style.scss的转移成style.css）

如果想要执行监视功能，就是保存文件之后就可以直接看见代码编译scss成css的效果，那就在liwei-sass处执行即可.

sass –watch sass:css

此刻,只要style.scss 输入一个css的属性之后,直接ctrl+s 保存,style.css的代码就会跟着进行改变。做到了实时编译的效果，节省开发时间、提高开发效率。

如果你觉得上面的body代码太简单了,根本看不出来两者都啥区别,下面我就写一个稍微复杂一点的,给你做参考,当你执行完这个代码之后,理解sass的编译就很容易了.好了不说了,直接上代码

以下是style.scss的代码部分:

    ul{        font-size: 15px;        li{            list-style: none;            span{                text-align: center;                font-weight: bold;            }        }    }

以下是编译好之后style.css的代码部分:

    ul {        font-size: 15px; }      ul li {        list-style: none; }    ul li span {        text-align: center;        font-weight: bold; }

这样看起来是不是就知道了,sass的结构,看起来就清晰了许多吧.

为了让你在视觉上有明显直观的感觉,下面在给你介绍几种scss的输出格式.

nested,嵌套
expanded,扩展
compact,紧凑
compressed,压缩

第一种nested就是上面代码展示的那样.这里举一个例子,就拿expanded来做演示.在终端执行

sass –watch sass:css –style expanded
（注：“-”是两个,不是一个）

编译之后,style.css显示的效果如下:

    ul {      font-size: 15px;    }    ul li {      list-style: none;    }    ul li span {      text-align: center;      font-weight: bold;    }

这种css的格式你再熟悉不过了吧。其他几个样式如果你想看看效果，可自行执行命令即可。

sass的入门开发就是这样,进阶之路还在继续,后期我会继续更新文章。
有问题的话,可以邮箱联系我，个人邮箱：[e-mail],大家一起学习,共同成长~