前端环境搭建-Sass介绍及安装

1：Sass介绍

CSS 不是编程语言，虽然可以用它来开发网页样式，但是没有办法用它编程。SASS 的出现，让 CSS 实现了通过代码编程的方式来实现。

SASS 是一种 CSS 预处理器，提供了许多便利的写法，让 CSS 的处理实现了可编程处理。

SASS 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等特性， 可以生成风格良好的 CSS 样式表文件，易于组织和维护。

SASS 官网：http://sass-lang.com/

2：环境搭建及编译指令

安装ruby：

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。

下载地址： http://rubyinstaller.org/downloads

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。

 

安装SASS：

安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby，然后直接在命令行中输入： gem install sass。按回车键确认，等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。

 

淘宝RubyGems镜像安装 sass：

gem sources --remove https://rubygems.org/  #移除默认的https://rubygems.org/源

gem sources -a https://ruby.taobao.org/  #添加淘宝的源https://ruby.taobao.org/

gem sources –l  #请确保只有 ruby.taobao.org

gem install sass  #安装sass

注：如果你系统不支持https，请将淘宝源更换成：gem sources -a http://gems.ruby-china.org/

查看sass版本：sass –v

升级sass版本：gem update sass

SASS编译：

单文件转换命令：sass style.scss style.css

单文件监听命令：sass --watch style.scss:style.css

文件夹监听命令：sass --watch sassFileDirectory:cssFileDirectory

命令行其他配置选项：

--style表示解析后的css是什么格式，有四种取值分别为：nested，expanded，compact，compressed。

--sourcemap表示开启sourcemap调试。开启sourcemap调试，会生成一个后缀名为.css.map文件。--sourcemap=none禁止输出该文件。

查看帮助文档：sass –h