Sass ,Scss 简单教程

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用 变量 、 嵌套规则 、 mixins 、 导入 等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库 一同使用时。

第一步安装 Sass gem：

如果你使用的是 Windows， 就需要先 安装 Ruby 。

如果要在命令行中运行 Sass ,只要输入

你还可以命令 Sass 监视文件的改动并更新 CSS ：

如果你的差旁目录里有很多 Sass 文件，你袜迹还可以命令 Sass 监视整个目录：

使用 sass --help 可以列出完整的帮助文档。

SASS提供四个 编译风格 的选项：

生产环境当中，一般使用最后一个选项。

SASS的官方网站，提供了一个 在线转换器 。可以进行练习。

SASS允许使用变量

SassScript 还支持所有其他 CSS 属性值类型， 例如 Unicode 范围和 !important 声明。 然而，它不会对这些类型做特殊处理。 它们只会被当做不带引号的字符串看待。

编译后

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

支持数字的标准运算（加 +、减 -、乘 *、除 /和取模 %）,数字也支持关系运算（<、>、<=、>=）， 等式运算（==、!=）被所有数据类型支持。

编译后

所虚好橡有算数运算都支持颜色值， 并且是分段运算的。 也就是说，红、绿、蓝各颜色分量会单独进行运算。 例如：

编译后

编译后

编译后

Mixins允许您定义可以在整个样式表中重新使用的样式

编译后

编译后

编译后

完整的案例： https://github.com/xiedajian/jsGrocery/blob/master/Sass%2CScss-demo/index.scss

编译后： https://github.com/xiedajian/jsGrocery/blob/master/Sass%2CScss-demo/index.css

参考：

阮一峰老师的SASS用法指南

SASS官方参考手册

说明：

1.文章根据慕课网的《Sass和Compass必备技能之Sass篇》整理而成，有兴趣的同学可以点击 传送门 去慕课网观看视频，如果觉得看视频太耗时间，那么请接着往下看吧.

2.有关sass和compass的区别，请自行百度获取各自官网查看

gem改源：放在rubygem.org上的资源文件位掘大于国外站点，由于某些原因，在国内访问可能会出现连接失败等问题，所以我们先把gem的连接源改到国内的一些镜像资判旦竖源上

so,接下来就到sass部分了，有木有很激动呢✧(≖ ◡ ≖✿)

好，先来安装sass吧。

ok,到这里sass就安装完成了完毕，最后迟液在放一些gem下常用的命令

进入到compasstest文件夹下查看compass生成的目录结构：

ok,接下来在项目文件中监视sass的change

cd learn-compass //进入到项目文件中

compass watch //监视compass的change -->Compass is watching for changes.Press Ctrl-c to Stop //监视已启动，可以使用ctrl-c来停止监视

到这里sass及compass的准备工作就已经完成喽。。。

---