Compass 学习笔记

来源：互联网发布：mac上文件变成exe 编辑：程序博客网时间：2024/05/16 11:35

Compass核心模块

这里写图片描述

compass核心模块中，只有reset和 layout需要显示引入，其它模块在@import “compass”时候就引入了。

@import "compass/reset"  @import "compass/layout"

用normalize替换compass内置的的reset：（normalize是compass的插件）

normalize改良了compass/reset ,统一了跨浏览器差异，而不是都清0；

1、安装normalize：

gem install compass-normalize

2、引入插件：

放在config.rb文件头部

require 'compass-normalize'

compass/import-once/activate：

一般项目建立之后的config.rb文件头部会有 require ‘compass/import-once/activate’：

这个插件的作用是防止sass的 @import 多次引入重复的文件，引入这个插件后即使写多次 @import “aa”,也只会引入一次aa。若确实想多次引入aa ，则应写成 @import “aa!” ，末尾添加叹号，则会多次引入。

叹号技巧：

如果将config.rb配置文件中设置 output_style = :compressed 生成的压缩css文件中的注释会被删除，如何防止注释被删除？在注释的开头加”!”，则注释会保留，即使设置了 output_style = :compressed。

/*！ * 你好你好 */

3、sass文件中用 @import “normalize” 替换 @import “compass/reset”

这里写图片描述

避免引入未使用的模块，可按需引入normalize的核心模块：

引入所需模块前先引入@import “normalize-version”，后面跟需要的normalize模块

@import "normalize-version";  /* 分割1 */   @import "normalize/base";  /* 分割2 */   @import "normalize/html5";  /* 分割3 */   ...

compass 中 reset模块

这里写图片描述

按需引入compass 中 reset的核心模块

官方地址：http://compass-style.org/reference/compass/reset/utilities/

reset的核心模块都是通过mixin的方式提供，引入示例代码：

@import "compass/reset/utilities"  .div{     @include reset-box-model  } //css.div{     margin:0;   padding:0;   border:0;}

其实@import “compass/reset/” 等价于 @import “compass/reset/utilities” 后再@include global-reset() ,如果不传参数，可以写成@include global-reset;

@import "compass/reset";/*@import "compass/reset/utilities";@include global-reset();*/

compass 中layout模块

layout模块下面又细分3个核心mixin模块，可以分别引入。

@import "compass/layout";@import "compass/layout/grid-background";@import "compass/layout/sticky-footer";@import "compass/layout/stretching";

stretching模块，按父元素尺寸拉伸元素，示例：

.stretch-full {      @include stretch();  }  .stretch-full2 {      @include stretch(5px,0px,5px,5px); //非0值单位px不可省  }  .stretch-full3 {      @include stretch($offset-top:5px,$offset-right:0px,$offset-bottom:5px,$offset-left:5px); //参数顺序可变,非0值单位px不可省  }

经过sass转换后代码：

.stretch-full {    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;  }  .stretch-full2 {    position: absolute;    top: 5px;    bottom: 0;    left: 5px;    right: 5px;  }  .stretch-full3 {    position: absolute;    top: 5px;    bottom: 5px;    left: 5px;    right: 0px;  }

sticky-footer模块,提供footer总在页面最底部的解决方案，需要固定的结构：

<body>    <div id="root">      <div id="root_footer"></div>    </div>    <div id="footer">      Footer content goes here.    </div>  </body>

使用方法：

@include sticky-footer(30px) //参数为footer高度  @include sticky-footer(30px, "#my-root", "#my-root-footer", "#my-footer") // 自定义选择器一一对应

compass 中css3模块

compass css3模块最常用，主要提供css3的跨浏览器能力。

@import "compass/css3";  //引入模块div{      @include box-shadow(1px,1px,2px,3px,#333)  }

编译后模块

div {    -moz-box-shadow: 1px, 1px, 2px, 3px, #333;    -webkit-box-shadow: 1px, 1px, 2px, 3px, #333;    box-shadow: 1px, 1px, 2px, 3px, #333;  }

css3更多属性地址：http://compass-style.org/reference/compass/css3/

compass 中Browser Support模块

修改Browser Support模块可以决定compass输出的css支持哪些浏览器版本，会影响其它模块。css3模块内部已经@import了support模块，所以下面方式均达到了引入support模块的效果

/*@import "compass/css3"*/  @import "compass/support"

查看当前支持的浏览器版本：

在sass文件中输入 @debug browsers() 控制台会打印出支持的浏览器。

控制台命令也可以打印出支持浏览器：

compass interactive //进入一个用于测试Compass中SassScript的控制台  browsers() //查看支持的浏览器  browser-versions(chrome) //查看支持的chrome版本

设置compass支持的浏览器：

$supported-browsers: chrome firefox;

也可以写成：$supported-browsers: chrome,firefox ; 浏览器队列用空格或者逗号分隔均可。

设置compass支持的浏览器的最低版本（compass默认支持到ie5.5）：

$browser-minimum-versions:("ie":"8")

不设置的话默认支持 browsers-versions 返回的的版本。

compass 中Typography

typography模块下面又细分4个核心mixin模块，可以分别引入。

@import "compass/typography"@import "compass/typography/links"@import "compass/typography/lists"@import "compass/typography/text"@import "compass/typography/vertical_rhythm"

typography更多属性地址：http://compass-style.org/reference/compass/typography/

compass 中Helpers模块

config.rb 文件中使用相对位置：

relative_assets = true

aa{    background-image: image-url('1.jpg');}//cssaa{  background-image: url('../images/1.jpg?1465725850');}

compass 中Utilities模块

合并雪碧图:(只支持png)

在sass目录下新建_icons.scss文件，并写入以下代码：

@import "compass/utilities/sprites";    // 加载compass sprites模块@import "logo/*.png";         // 导入logo目录下所有png图片合成雪碧图@include all-logo-sprites;    // 输出所有的雪碧图css

然后在screen.scss中将_icons.scss文件中引入进来：

@import "icons";

至此，我们就实现了一个简单的雪碧图合并

这里写图片描述

生成的代码中.logo-sprite是雪碧图的基础类，生成的每个雪碧图默认的class规则是：.目录名-图片名。如果想自定义，我们可以通过下面调用单个雪碧图的方式来实现。

调用单个雪碧图样式：

@import "compass/utilities/sprites";@import "logo/*.png";.test {    @include logo-sprites(add);}

编译后：

.logo-sprite, .test .logo-add {  background-image: url('../images/logo-s6821f80d78.png');  background-repeat: no-repeat;}.test .logo-add {  background-position: 0 0;}

当图标有多种状态时，比如hover, active, focus, target等。需要将图标按照一定的规则命名：

add.png            // 默认状态图标add_hover.png     // hover状态图标add_active.png     // active状态图标

编译后

这里写图片描述

也就是说compass默认会将以_hover, _active等名字结尾的图片自动输出对应的:hover, :active等伪类样式。当然如果不想这样的话，也可以禁用它。

$disable-magic-sprite-selectors : true;    // 默认为false

然后在将

add_hover.png  改为 addhove.png (任意你想定义的名字)add_active.png  改为 addactive.png (任意你想定义的名字)

重新编译

这里写图片描述

雪碧图配置

设置sprite尺寸

我们在合并雪碧图时，很多时候图片的尺寸都不一样，那么在使用时我们如何给每个sprite设置尺寸呢？compass有提供自动设置每个sprite尺寸的配置，默认是关闭的，我们只需手动启用即可。

@import "compass/utilities/sprites";$logo-sprite-dimensions: true;    // 启用自动设置sprite尺寸，默认值为false

编译出：

.logo-add {  background-position: 0 0;  height: 20px;  width: 20px;  //默认图片自身的宽高}

配置sprite的布局方式

$logo-layout: vertical/horizontal/diagonal/smart; // 默认布局方式为vertical

清除过期的sprite

每当添加、删除或改变图片后，都会生成新的sprite，默认情况下compass会自动的移除旧的sprite，当然也可以通过配置来保留旧的sprite。

$logo-clean-up: true/false;        // 默认值为true

更多设置： http://compass-style.org/reference/compass/utilities/sprites/

1 0