sass，less的安装及sass的教程

装scss（window）

首相安装ruby

http://www.sasschina.com/install/

scss转译css

http://www.cnblogs.com/52css/archive/2012/08/19/sass-how-to-install-and-use.html

如果安装之后在cmd（以管理员），在到saxx文件目录，如果在输入

gem install sass

提示：gem不是内命令，那是变量环境没有安装，有两种解决办法

1.重新安装ruby，在ruby安装面板中勾选三个参数，即可自动添加环境变量

2.点击我的电脑数据，更改设置，高级，环境变量（也就是手动添加环境变量）

将scss文件转化css文件的命令

sass --watch demo.scss:demo.css

less的安装

npm install -g less # 在这之前安装node

另外编辑HBuilder自带未安装的less插件，但是sass插件却没有，需要自己安装 ，步骤如下：

1、安装sass，参考：http://www.w3cplus.com/sassguide/install.html

2、如下图，菜单‘工具’下，选择‘预编译器设置’→选择‘.sass,.scss’，点击编辑，弹出对话框：

a、文件后缀不变，为：.sass,.scss

b、触发命令地址填写sass的安装路径，如：我的本机sass路径为：d:\Ruby22\bin\sass.bat

c、命令参数：

--no-cache %FileName% ../css/%FileBaseName%.css --style compact

这一段代码其实就是一段ruby语言，你看单词也猜是什么意思

--no-cache 　　表示没缓存

%FileName%　　 表示文件名

../css/%FileBaseName%.css 　　表示存储css文件目录地址（相对）

--style 　　表示格式，有4种格式：nested  expanded  compact compressed

简单说sass的用法，详细可去阮一峰sass博客

1.嵌套

text {

    font-size: 12px;

    p {

        text-indent: 20px;

    }

}

.box {

    border: 1px solid #ddd; {

        left: 0;

        right: 0;

    }

}

.class1 {

    border: 1px solid #ddd;

}

.class2 {

    @extend .class1;

}

$var: 1100px/7;//长度带单位

$a: 1100px - 200px; //+、-时前后要有空格