sass 安装和使用(window7环境)

开发环境:win7

开发工具:sublime

一、安装工具,工欲善其事,必先利其器。

1,安装ruby。

   因为SASS的编译器是Ruby语言写的,所以必须先安装ruby。

2,ruby环境下安装sass

  安装好ruby后,打开命令行工具输入:gem install sass 。到此,已经安装后sass了,但是为了更方便开发,我多加了一个第三步。

  由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。

  这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/

  然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass了,

  关于常用gem source命令可参看:常用的gem source

  

$ gem sources --remove https://rubygems.org/

$ gem sources -a https://ruby.taobao.org/

$ gem sources -l

*** CURRENT SOURCES ***

https://ruby.taobao.org

# 请确保只有 ruby.taobao.org

$ gem install sass

3,让sublime支持sass语法

  如果不安装任何插件,在编辑器里写sass里是没有任何高亮,补全的提示。

二、使用sass

1,基本用法

  

sass index.scss index.css

  sass文件的后缀名为scss(sass css)

2,带编译风格的用法

sass --style compressed test.sass test.css  

  * nested:嵌套缩进的css代码,它是默认值。

  * expanded:没有缩进的、扩展的css代码。

  * compact:简洁格式的css代码。

  * compressed:压缩后的css代码。

3,监听文件变化

sass --watch input.scss:output.css

4,监听目录变化

sass --watch app/sass:public/stylesheets

三、sass语法

  网上很多,暂不赘述,有兴趣访问yuanyifeng老师的教程:sass用法指南

原文地址:https://www.cnblogs.com/smjia/p/4860410.html