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