安装了ruby后怎么安装sass

Python018

安装了ruby后怎么安装sass,第1张

ruby安装

因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先导官网下载个ruby

在安装的时候,请勾选Add Ruby executables to your

PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境

sass安装

如果你喜欢偷懒,或者你公司网络限制比较多,请直接看最后一段

安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

然后直接在命令行中输入

gem install sass

按回车键确认,等待一段时间就会提示你sass安装成功。

如果要安装beta版本的,可以在命令行中输入

gem install sass --pre

你还可以从sass的Git repository来安装,git的命令行为

git clone git://github.com/nex3/sass.git cd sass rake install

如果上述的办法你尝试失败了,那说明要么被你的网络墙了这个,要么你的网络信号不好。你可以尝试本地安装,不过有点复杂。这里暴漏个惊天秘密,那就是koala这个编译工具已经内置了sass,所以如果你安装了koala,就根本不需要安装sass,注意ruby还是得安装。关于koala请参阅编译工具。

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官方参考手册