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

来源：互联网发布：国外域名注册商性价比编辑：程序博客网时间：2024/06/09 21:11

一、环境的搭建：

附件地址：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；                    }               }        }}

阅读全文

0 0