1.安装sass 1.安装ruby
因为sass是用ruby语言写的，所以需要安装ruby环境
打开安装包去安装ruby，记住要勾选 下面选项来配置环境路径
安装完成之后继续下一步操作
2.安装sass在cmd里通过gem安装sass
gem是ruby的包管理工具，类似于nodejs 的npm
gem install sass
这个时候如果不FQ的话是会出问题的，因为：
由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了
$ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https，请将淘宝源更换成：gem sources -a 】 $ gem sources -l *** CURRENT SOURCES *** https://ruby.taobao.org # 请确保只有 ruby.taobao.org $ gem install sass
安装好之后执行sass -v就可以看到sass的版本了
实在实在不行，就安装离线文件吧,但是失败率也很高
gem install ./.../sass-3.4.22.gem
2.编译sass文件的方式 1.命令行编译可以通过cmd命令行执行sass方法来编译
例如：
sass scss/a.scss:css/a.css
sass 后面写要编译的sass文件的路径，‘：’后面写的是
要输出的目录及名字
这样的话写一句执行一次编译一次有些太麻烦
可以开启一个watch来监听文件变化来进行编译
sass --watch scss:css
--watch表示要监听 ：前后的两个都是文件夹，表示scss文件夹的文件改变就编译到css文件夹
2.其他方式编译除了命令行工具其实还可以用考拉、gulp等工具进行编译，但是ruby和sass是必须要安装的
考拉的方式就不多做介绍了，大家i自己去看一下
gulp的话呢是需要gulp-sass的模块来编译，使用方式类似于gulp-less
这里是网址，点击查看
3.sass四种风格 sass编译的格式sass编译输出的css有四种格式
这些样式会影响输出的css的格式
简单介绍一下：
css默认输出的嵌套
ul{ font15px; li{ listnone
---》
ul { font15px; } ul li { listnone; }
紧凑compact
在编译的时候需要执行
sass --watch scss:css --style compact
这个时候输出的代码就是
ul 15px; } ul li none5px; }
compressed 压缩
在编译的时候需要执行
sass --watch scss:css --style compressed
--->
ul15pxnoneall 0.4s}
expanded 扩展
更像是平时写的css一样
在编译的时候需要执行
sass --watch scss:css --style expanded
--->
ul { font15px; } ul li { listnoneall 0.3s; }
compressed 压缩
更像是平时写的css一样
在编译的时候需要执行
sass --watch scss:css --style compressed
--->
.100px100px1px solid redred}
4.sass与scss sass的两个语法版本sass一开始用的是一种缩进式的语法格式
采用这种格式文件的后缀名是.sass
在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法
两个版本的区别新版：
@import "base"; @mixin alertredblue; } .alert-warning{ @include alert; } ul{ font15px; li{ listnone
老版本：
@import "base" =alert color:red background:blue .alert-warning +alert ul font-size:15px li list-style:none
相关文章
精彩导读
热门资讯
关注我们
