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.嵌套

1.1节点嵌套

text {
    font-size: 12px;
    p {
        text-indent: 20px;
    }
}

1.2 属性嵌套

.box {
    border: 1px solid #ddd; {
        left: 0;
        right: 0;
    }
}

2.继承

.class1 {
    border: 1px solid #ddd;
}
.class2 {
    @extend .class1;
}

3.运算

$var: 1100px/7;//长度带单位
$a: 1100px - 200px; //+、-时前后要有空格

处理浏览器前缀问题的办法