省略sass/compass安装的过程^_^

sass

1. 常用命令

sass main.scss //打印到控制台

sass main.scss main.css //输出到main.css中

sass-convert main.scss main.sass// scss sass相互转化

2. 中文编译问题

sass文件中，代码若有中文编译Sass 文件出现Syntax error: Invalid GBK character报错,需要修改ruby对中文的支持。

• 找到ruby的安装目录，里面也有sass模块，找到文件engine.rb。如这个路径:C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb(用everything搜索engine.rb)

• 在这个文件里面engine.rb，添加一行代码：
  Encoding.default_external = Encoding.find(‘utf-8’)
  放在所有的require XXXX 之后即可。

3. sass语法

1.文件导入

sass文件名规则，文件名_variables.scss
导入的时候只需要这么写：

import 'variables'

可以看到不需要下划线和后缀，sass编译器认为variables == _variables.scss

2. 变量

变量的声明：

    $baseSize:62.5%;
    $baseColor: #f0f;

变量的使用

html {
    font-size: $baseSize;
    color: $baseColor;
}

3. mixin

mixin声明

@mixin col-6 {
    width: 50%;
    float: left;
}


@mixin col($width: 40%) {
    width: $width;
    float: left;
}

@mixin col-sm($width: 50%) {
    @media (min-width: 768px) {
        width: $width;
        float: left;
    }
}

mixin使用

div.content {
   /*@include col-6();*/
   //@include col(); //无参数括号可以省略
   @include col-sm();

   &:hover {
        background-color:#f5f5f5;
   };

    @at-root //编译后寻址路径不再是：div.content .content-title{}
   .content-title {
        color: #0f0;
        font-size: 2em;
   }
}

4. extend

extend使用

//编译到css中
/* .error { 
    color: red;
} */

//不会编译到css中
%error {
    color: red;
}

.serious-error {
    @extend %error;

    border: 1px solid red;
}

compass

1. 文件配置config.rb

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

2. compass常用命令

compass create myproject //创建compass项目

compass compile //编译

compass watch //监听文件修改，及时编译，需要配置文件

参考资料
http://www.ruanyifeng.com/blog/2012/06/sass.html
http://www.ruanyifeng.com/blog/2012/11/compass.html

http://www.imooc.com/learn/371
http://www.imooc.com/learn/364