关于Compass
常用操作命令
//使用下边的命令，编译出css。该项目在根目录下运行，会编译所有sass文件夹中的sass文件，并放入stylesheets文件夹中compass compile//默认状态下编译出的css文件带有大量的注释。但生产环境中需要压缩的css文件，此时使用：compass compile --output-style compressed//compass只编译发生变动的sass文件，若要重新编译未改动的文件，则：compass compile --force//除了命令行，还可以在新建项目中的配置文件config.rb中指定编译模式。:expanded模式表示编译后保留原格式，其他值还包括:nested、:compact和:compressed。进入生产阶段后，就要改为:compressed模式。output_style = :expanded//除了上边的一次性编译，还可以设置监视自动编译：compass watch//这样只要sass文件发生变化，css就实时刷新。
1，核心模块：
（这两个模块需要明确引入）
1，reset 浏览器样式重置模块，减少浏览器差异
2，layout模块用来提供页面布局控制能力
3，Helpers CSS3 Typography Utilities （@import "compass"）
2，Normalize核心模块，分别normalize不同模块
base html5 links typography embeds groups forms tables
@import "normalize-version";
/*分割线1*/
@import "normalize/base";
/*分割线2*/
@import "normalize/html5";
/*分割线3*/
@import "normalize/links";
3，@import "compass/reset/utilities";
@import "compass/reset"; //调用了compass的utilities的global reset的mixin
即 @include global-reset(); ()可省略
reset包含12个核心mixin
4，layout模块
1,@import "compass/layout";
2,@import "compass/layout/grid-background";
$grid-background-color-column-color: rgba(255,0,0,.25);
#include grid-background();
3,@import "compass/layout/sticky-footer";
@include sticky-footer(30px,"#my-root","#my-root-footer","#my-footer");
4,@import "compass/layout/stretching"; //元素拉伸填满整个子元素的能力，
@include stretch($offset-top:3px, ......); @include stretch-y(); @include stretch-x();
5,css3模块
@import "compass/css3";
6,browsers-support模块
@import "compass/support"; //支持哪些浏览器，可以不写，css3模块自带
@debug browsers(); //输出支持的浏览器
browser-version(chrome); //输出支持的浏览器版本
$supported-browsers:chrome; //指定支持的浏览器
$brower-minimum-versions:("ie","8"); //指定最低的版本
7，typography模块
1，@import "compass/typography";
2，@import "compass/typography/links";
Hover Link @include hover-link();
Link Colors （normal hover active visited focus）
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0) 第一个参数必须
Unstyled Link @include unstyled-link(); 抹平超链接样式，与普通文字一样
3，@import "compass/typography/lists";
Bullets – @include no-bullets(); style为none
Horizontal List – @include horizontal-list($padding, $direction) 浮动
@mixin horizontal-list($padding: 4px, $direction: left) {
@include horizontal-list-container;
li {
@include horizontal-list-item($padding, $direction);
}
}
@include horizontal-list(false)，兼容ie
Inline-Block List –@mixin inline-block-list($padding: false) {
@include inline-block-list-container;
li {
@include inline-block-list-item($padding);
}
}
Inline List – @include inline-list(); //display：inline；
4, @import "compass/typography/text";
Ellipsis – 用省略号表示多余的文字
.test-ellipsis {
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url('/stylesheets/xml/ellipsis.xml#ellipsis');
}
$use-mozilla-ellipsis-binding: true; 对firefox低版本的支持
Force Wrap – 强制换行
@mixin force-wrap {
white-space: pre;
// CSS 2.0
white-space: pre-wrap;
// CSS 2.1
white-space: pre-line;
// CSS 3.0
white-space: -pre-wrap;
// Opera 4-6
white-space: -o-pre-wrap;
// Opera 7
white-space: -moz-pre-wrap;
// Mozilla
white-space: -hp-pre-wrap;
// HP Printers
word-wrap: break-word;
// IE 5+
}
No Wrap – 强制不换行
@mixin nowrap {
white-space: nowrap;
}
5，@import "compass/typography/vertical_rhythm"; 使得元素的高是基准高的整数倍
@include debug-vertical-alignment(); //基准线图片
@import "compass/typography/vertical_rhythm";
$base-font-size: 16px;
$base-line-height: 24px;
@include establish-baseline();
.body {
@include debug-vertical-alignment();
}
h1 {
@include adjust-font-size-to(3em);
}
h2 {
@include adjust-font-size-to(2.25em);
}
h3 {
@include adjust-font-size-to(1.5em);
p {
@include adjust-font-size-to(1em); //设置font-size和line-height
font-size: 1em;
line-height: 1.5em;
@include leader(); //设置margin-top，默认为1.5em
@include trailer(); //设置margin-bottom，默认为1.5em
}
8，helper模块
在选择器属性名或者字符串里面引用sass变量或者函数时，、
#{append-selector("p,div,span",".bar")}{
color:red;
}
@import "compass/utilities"
Color
General
Print
Sprites
Tables
Sprites： 合成雪碧图（只支持png文件）
@import "compass/utilities/sprites";
@import "logo/*.png";
@include all-logo-sprites();
使用 compass sprite "logo/*/png" 形成显式文件夹，文件中有minxin
在其他类名中显示同一张图片
.main-logo {
@include logo-sprite("teacher1");
}
$logo-sprite-dimensions: true; //用来控制输出CSS的时候是否根据图片大小对我们的相应类名css属性添加一个宽和高。
$disable-magic-sprite-selectors: true; //取消active hover的样式
$logo-layout: smart; //布局可以是vertical horizontal diagonal 等等