SASS基本语法及搭建并结合COMPASS高效工作

一、环境的搭建：

附件地址：https://pan.baidu.com/s/1geBcVjt 密码vmq2

由于SASS 与 COMPASS 需要访问国外服务器安装，在国内无法正常安装；搜索https://rubygems.org/寻找SASS与COMPASS把文件下载到本地安装即可；

1.RUBY（附件含有）

2.SASS（附件含有）

3.COMPASS 安装compass时需要安装相关依赖的文件后才能正常安装compass（附件全部含有）

安装方式：

1.RUBY：附件exe文件安装（注意把选项"add ruby executables to your path"勾上），在window命令管理器中输入ruby -v能输出版本则安装成功；

2.SASS：假设SASS.GEM文件下载到本地路径的D:\gem，在window命令管理器中输入如下

   
   
D:
D:> cd gem
D:\gem> gem install --local sass-3.4.5.gem

(在window命令管理器中输入sass -v能输出版本则安装成功，gem list可查看所安装GEM包)

3.COMPASS：假设COMPASS.GEM文件下载到本地路径的D:\gem，在window命令管理器中输入如下

    
    
D:
D:> cd gem
D:\gem> gem install --local compass.gem

(在window命令管理器中输入compass -v能输出版本则安装成功)

二、启用COMPASS（附件有例子）：

   COMPASS用法指南： http://www.ruanyifeng.com/blog/2012/11/compass.html 

    1.启用COMPASS并将SCSS自动编译CSS

   下面输入是在window命令管理器中；

      
      
D:
D:> cd gem
D:\gem> compass create myproject //创建一个名为myproject的sass环境
D:\gem> cd myproject
D:\gem\myproject> compass watch 
//出现compass is watching for change,代表成功启动，注意必须是在根目录下启动才能编译，作用是保存scss文件时自动编译为css文件；

   2.调用COMPASS框架的功能（在启动compass的sass文件夹内可做以下设置）：

1 .scss文件间调用 ；

        例如：

      main.scss内写入

      @import "base/head"; @import "base/body"; @import "base/foot";

      将base文件夹（上面的base对应文件名）内的"_head.scss"、"_body.scss"、"_foot.scss"结合并自动生成main.css文件

 2.自动生成浏览器间对应的CS3S前缀，如圆角、渐变、透明度、转换等；

       @import "compass/css3"; 

       .box{ @include border-radius(5px); } 

       将会生成

       .box{

             -moz-border-radius: 10px;

             -webkit-border-radius: 10px;

             border-radius: 10px;

       }

3. 多张小图标图片自动合并为一张并且设定好对应坐标；

       @import "compass/utilities/sprites";

       @import "icons/*.png";              //icons代表/images/icons的文件夹，*代表icons文件内的所有png图片；

       @include all-icons-sprites;        //icons代表/images/icons的文件夹；

       图标的设置：

       <map>: 图标存放的文件夹名称

       <sprite>: 对应单个图标的名称

       $<map>-<property>: setting; 

       $<map>-<sprite>-<property>: setting;  

          例子:

               设置自动生成的图标间距离：

               $icons-spacing: 5px;                 //代表所有图标

               $icons-weibo-spacing: 10px;    //代表单个图标weibo为文件名；

               设置自动生成的图标坐标偏移：

               $icons-position: 5px;

               $icons-weibo-position:10px;

               设置自动生成的图标重复性：

               $icons-repeat: no-repeat / repeat-x;

               $icons-weibo-repeat: no-repeat / repeat-x;

               设置自动生成的图标布局方式：

               $icons-layout:vertical/horizontal/diagonal/smart; 

               当每个图标尺寸不一时设置自动生成的图标尺寸为自动配置：        

               $icons-sprite-dimensions: true;

三、SASS的语法；

$mycolor:red!default;                     //初始化值；
%mystyle{ font-family:Arial,Helvetica; }  //文件开始不加载，调用时才加载；
h1{ border:thin solid #ff99aa; }
@mixin myset($mywidth,$myheight){         //定义带参数的宏；
    @media screen and (max-width:20px){   //CSS3属性用于当屏幕小于所设置的宽度使用特点样式
       max-width:$mywidth;
       max-height:$myheight;
       @contact;                          //@include时可以传入相关内容到@mixin内(例子传入:float:left);     
       padding:{
           top:thin solid white;
       }
       text:{
           decoration:none;
           @extend %mystyle;
       }
    }
}
.test{                                        //巢式嵌套
       nav{
           @extend h1;                        //css编译成：nav,h1{ border:thin solid #ff99aa; }
               li{
                    background:black;
                    font-size:small; 
                          @include myset(50px,100px){  float:left;  };   
               }
               a{
                    color:$mycolor;                                   //把初始值赋值给color；
                    &:hover{                                          //表示a:hover{}
                          //调用宏并且在定义好的宏内增加内容 float:left；
                    }
               }
        }
}