首先安装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的入门开发就是这样,进阶之路还在继续,后期我会继续更新文章。
有问题的话,可以邮箱联系我,个人邮箱:fengmo.kiss@gmail.com,大家一起学习,共同成长~